[{"data":1,"prerenderedAt":2688},["ShallowReactive",2],{"navigation_docs":3,"-usage-nuxt-img":200,"-usage-nuxt-img-surround":2683},[4,30,47,187],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","/get-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","/get-started/installation","1.get-started/1.installation",{"title":14,"path":15,"stem":16},"Configuration","/get-started/configuration","1.get-started/2.configuration",{"title":18,"path":19,"stem":20},"Providers","/get-started/providers","1.get-started/3.providers",{"title":22,"path":23,"stem":24},"Contributing","/get-started/contributing","1.get-started/4.contributing",{"title":26,"path":27,"stem":28},"Migration","/get-started/migration","1.get-started/5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","/usage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","/usage/nuxt-img","2.usage/1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","/usage/nuxt-picture","2.usage/2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","/usage/use-image","2.usage/3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"/providers","3.providers",[51,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183],{"title":52,"path":53,"stem":54},"Aliyun","/providers/aliyun","3.providers/aliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","/providers/aws-amplify","3.providers/aws-amplify",{"title":60,"path":61,"stem":62},"Bunny","/providers/bunny","3.providers/bunny",{"title":64,"path":65,"stem":66},"Caisy","/providers/caisy","3.providers/caisy",{"title":68,"path":69,"stem":70},"Cloudflare","/providers/cloudflare","3.providers/cloudflare",{"title":72,"path":73,"stem":74},"Cloudimage","/providers/cloudimage","3.providers/cloudimage",{"title":76,"path":77,"stem":78},"Cloudinary","/providers/cloudinary","3.providers/cloudinary",{"title":80,"path":81,"stem":82},"Contentful","/providers/contentful","3.providers/contentful",{"title":84,"path":85,"stem":86},"Directus","/providers/directus","3.providers/directus",{"title":88,"path":89,"stem":90},"Fastly","/providers/fastly","3.providers/fastly",{"title":92,"path":93,"stem":94},"Filerobot","/providers/filerobot","3.providers/filerobot",{"title":96,"path":97,"stem":98},"GitHub","/providers/github","3.providers/github",{"title":100,"path":101,"stem":102},"Glide","/providers/glide","3.providers/glide",{"title":104,"path":105,"stem":106},"Gumlet","/providers/gumlet","3.providers/gumlet",{"title":108,"path":109,"stem":110},"Hygraph","/providers/hygraph","3.providers/hygraph",{"title":112,"path":113,"stem":114},"ImageEngine","/providers/imageengine","3.providers/imageengine",{"title":116,"path":117,"stem":118},"ImageKit","/providers/imagekit","3.providers/imagekit",{"title":120,"path":121,"stem":122},"Imgix","/providers/imgix","3.providers/imgix",{"title":124,"path":125,"stem":126},"IPX","/providers/ipx","3.providers/ipx",{"title":128,"path":129,"stem":130},"Netlify","/providers/netlify","3.providers/netlify",{"title":132,"path":133,"stem":134},"None","/providers/none","3.providers/none",{"title":136,"path":137,"stem":138},"Prepr","/providers/prepr","3.providers/prepr",{"title":140,"path":141,"stem":142},"Prismic","/providers/prismic","3.providers/prismic",{"title":144,"path":145,"stem":146},"Sanity","/providers/sanity","3.providers/sanity",{"title":148,"path":149,"stem":150},"Shopify","/providers/shopify","3.providers/shopify",{"title":152,"path":153,"stem":154},"Sirv","/providers/sirv","3.providers/sirv",{"title":156,"path":157,"stem":158},"Storyblok","/providers/storyblok","3.providers/storyblok",{"title":160,"path":161,"stem":162},"Strapi","/providers/strapi","3.providers/strapi",{"title":164,"path":165,"stem":166},"Supabase","/providers/supabase","3.providers/supabase",{"title":168,"path":169,"stem":170},"Twicpics","/providers/twicpics","3.providers/twicpics",{"title":172,"path":173,"stem":174},"Unsplash","/providers/unsplash","3.providers/unsplash",{"title":176,"path":177,"stem":178},"Uploadcare","/providers/uploadcare","3.providers/uploadcare",{"title":180,"path":181,"stem":182},"Vercel","/providers/vercel","3.providers/vercel",{"title":184,"path":185,"stem":186},"Weserv","/providers/weserv","3.providers/weserv",{"title":188,"path":189,"stem":190,"children":191,"page":29},"Advanced","/advanced","4.advanced",[192,196],{"title":193,"path":194,"stem":195},"Custom Provider","/advanced/custom-provider","4.advanced/1.custom-provider",{"title":197,"path":198,"stem":199},"Static Images","/advanced/static-images","4.advanced/2.static-images",{"id":201,"title":36,"body":202,"description":2673,"extension":868,"links":2674,"meta":2680,"navigation":602,"path":37,"seo":2681,"stem":38,"__hash__":2682},"docs/2.usage/1.nuxt-img.md",{"type":203,"value":204,"toc":2649},"minimark",[205,216,253,257,269,310,313,339,355,359,365,381,394,430,435,648,654,658,661,673,697,710,718,721,735,739,752,760,779,820,824,827,835,842,870,876,918,923,928,933,936,940,1003,1005,1058,1063,1066,1074,1077,1295,1303,1418,1423,1432,1514,1563,1568,1579,1583,1749,1754,1757,1767,1951,1956,1959,2000,2023,2028,2031,2099,2104,2109,2140,2204,2207,2212,2215,2221,2225,2318,2323,2330,2356,2361,2375,2382,2417,2422,2437,2549,2553,2564,2575,2645],[206,207,208,211,212,215],"p",{},[209,210,36],"code",{}," is a drop-in replacement for the native ",[209,213,214],{},"\u003Cimg>"," tag.",[217,218,219,223,230,240,247],"ul",{},[220,221,222],"li",{},"Uses built-in provider to optimize local and remote images",[220,224,225,226,229],{},"Converts ",[209,227,228],{},"src"," to provider optimized URLs",[220,231,232,233,236,237],{},"Automatically resizes images based on ",[209,234,235],{},"width"," and ",[209,238,239],{},"height",[220,241,242,243,246],{},"Generates responsive sizes when providing ",[209,244,245],{},"sizes"," option",[220,248,249,250,252],{},"Supports native lazy loading as well as other ",[209,251,214],{}," attributes",[254,255,31],"h2",{"id":256},"usage",[206,258,259,261,262,265,266,268],{},[209,260,36],{}," outputs a native ",[209,263,264],{},"img"," tag directly (without any wrapper around it). Use it like you would use the ",[209,267,214],{}," tag:",[270,271,276],"pre",{"className":272,"code":273,"language":274,"meta":275,"style":275},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg src=\"/nuxt-icon.png\" />\n","vue","",[209,277,278],{"__ignoreMap":275},[279,280,283,287,291,295,298,301,305,307],"span",{"class":281,"line":282},"line",1,[279,284,286],{"class":285},"sMK4o","\u003C",[279,288,290],{"class":289},"swJcz","NuxtImg",[279,292,294],{"class":293},"spNyl"," src",[279,296,297],{"class":285},"=",[279,299,300],{"class":285},"\"",[279,302,304],{"class":303},"sfazB","/nuxt-icon.png",[279,306,300],{"class":285},[279,308,309],{"class":285}," />\n",[206,311,312],{},"Will result in:",[270,314,318],{"className":315,"code":316,"language":317,"meta":275,"style":275},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg src=\"/nuxt-icon.png\">\n","html",[209,319,320],{"__ignoreMap":275},[279,321,322,324,326,328,330,332,334,336],{"class":281,"line":282},[279,323,286],{"class":285},[279,325,264],{"class":289},[279,327,294],{"class":293},[279,329,297],{"class":285},[279,331,300],{"class":285},[279,333,304],{"class":303},[279,335,300],{"class":285},[279,337,338],{"class":285},">\n",[340,341,342,343,347,348,350,351,354],"note",{},"With ",[344,345,346],"a",{"href":19},"default provider",", you should put ",[209,349,304],{}," inside ",[209,352,353],{},"public/"," directory for Nuxt 3 make the above example work.",[254,356,358],{"id":357},"props","Props",[360,361,363],"h3",{"id":362},"custom",[209,364,362],{},[206,366,367,368,370,371,373,374,376,377,380],{},"The ",[209,369,362],{}," prop determines whether ",[209,372,36],{}," should render as a simple ",[209,375,214],{}," element or only serve as a provider for custom rendering. When set to ",[209,378,379],{},"true",", it disables the default rendering behavior, allowing full control over how the image is displayed. This is useful for implementing custom functionalities, such as placeholders.",[206,382,383,384,386,387,389,390,393],{},"When using the ",[209,385,362],{}," prop, ",[209,388,36],{}," passes necessary data and attributes to its default slot. You can access the following values via the ",[209,391,392],{},"v-slot"," directive:",[217,395,396,419,424],{},[220,397,398,401,402,404,405,408,409,408,411,408,413,408,416,418],{},[209,399,400],{},"imgAttrs",": Attributes for the ",[209,403,214],{}," element (e.g., ",[209,406,407],{},"alt",", ",[209,410,235],{},[209,412,239],{},[209,414,415],{},"srcset",[209,417,245],{},").",[220,420,421,423],{},[209,422,228],{},": The computed image source URL.",[220,425,426,429],{},[209,427,428],{},"isLoaded",": A boolean indicating whether the image has been loaded.",[431,432,434],"h4",{"id":433},"example-usage","Example Usage",[270,436,438],{"className":272,"code":437,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  src=\"/images/nuxt.png\"\n  alt=\"image\"\n  width=\"400\"\n  height=\"400\"\n  :custom=\"true\"\n  v-slot=\"{ src, isLoaded, imgAttrs }\"\n>\n  \u003C!-- Show the actual image when loaded -->\n  \u003Cimg\n    v-if=\"isLoaded\"\n    v-bind=\"imgAttrs\"\n    :src=\"src\"\n  >\n\n  \u003C!-- Show a placeholder while loading -->\n  \u003Cimg\n    v-else\n    src=\"https://placehold.co/400x400\"\n    alt=\"placeholder\"\n  >\n\u003C/NuxtImg>\n",[209,439,440,447,463,478,493,507,524,556,561,567,573,579,585,591,597,604,610,615,621,627,633,638],{"__ignoreMap":275},[279,441,442,444],{"class":281,"line":282},[279,443,286],{"class":285},[279,445,446],{"class":289},"NuxtImg\n",[279,448,450,453,455,457,460],{"class":281,"line":449},2,[279,451,452],{"class":293},"  src",[279,454,297],{"class":285},[279,456,300],{"class":285},[279,458,459],{"class":303},"/images/nuxt.png",[279,461,462],{"class":285},"\"\n",[279,464,466,469,471,473,476],{"class":281,"line":465},3,[279,467,468],{"class":293},"  alt",[279,470,297],{"class":285},[279,472,300],{"class":285},[279,474,475],{"class":303},"image",[279,477,462],{"class":285},[279,479,481,484,486,488,491],{"class":281,"line":480},4,[279,482,483],{"class":293},"  width",[279,485,297],{"class":285},[279,487,300],{"class":285},[279,489,490],{"class":303},"400",[279,492,462],{"class":285},[279,494,496,499,501,503,505],{"class":281,"line":495},5,[279,497,498],{"class":293},"  height",[279,500,297],{"class":285},[279,502,300],{"class":285},[279,504,490],{"class":303},[279,506,462],{"class":285},[279,508,510,513,515,517,519,522],{"class":281,"line":509},6,[279,511,512],{"class":285},"  :",[279,514,362],{"class":293},[279,516,297],{"class":285},[279,518,300],{"class":285},[279,520,379],{"class":521},"sfNiH",[279,523,462],{"class":285},[279,525,527,530,532,534,537,540,543,546,548,551,554],{"class":281,"line":526},7,[279,528,529],{"class":293},"  v-slot",[279,531,297],{"class":285},[279,533,300],{"class":285},[279,535,536],{"class":285},"{",[279,538,294],{"class":539},"sTEyZ",[279,541,542],{"class":285},",",[279,544,545],{"class":539}," isLoaded",[279,547,542],{"class":285},[279,549,550],{"class":539}," imgAttrs ",[279,552,553],{"class":285},"}",[279,555,462],{"class":285},[279,557,559],{"class":281,"line":558},8,[279,560,338],{"class":285},[279,562,564],{"class":281,"line":563},9,[279,565,566],{"class":539},"  \u003C!-- Show the actual image when loaded -->\n",[279,568,570],{"class":281,"line":569},10,[279,571,572],{"class":539},"  \u003Cimg\n",[279,574,576],{"class":281,"line":575},11,[279,577,578],{"class":539},"    v-if=\"isLoaded\"\n",[279,580,582],{"class":281,"line":581},12,[279,583,584],{"class":539},"    v-bind=\"imgAttrs\"\n",[279,586,588],{"class":281,"line":587},13,[279,589,590],{"class":539},"    :src=\"src\"\n",[279,592,594],{"class":281,"line":593},14,[279,595,596],{"class":539},"  >\n",[279,598,600],{"class":281,"line":599},15,[279,601,603],{"emptyLinePlaceholder":602},true,"\n",[279,605,607],{"class":281,"line":606},16,[279,608,609],{"class":539},"  \u003C!-- Show a placeholder while loading -->\n",[279,611,613],{"class":281,"line":612},17,[279,614,572],{"class":539},[279,616,618],{"class":281,"line":617},18,[279,619,620],{"class":539},"    v-else\n",[279,622,624],{"class":281,"line":623},19,[279,625,626],{"class":539},"    src=\"https://placehold.co/400x400\"\n",[279,628,630],{"class":281,"line":629},20,[279,631,632],{"class":539},"    alt=\"placeholder\"\n",[279,634,636],{"class":281,"line":635},21,[279,637,596],{"class":539},[279,639,641,644,646],{"class":281,"line":640},22,[279,642,643],{"class":285},"\u003C/",[279,645,290],{"class":289},[279,647,338],{"class":285},[206,649,650,651,653],{},"This approach ensures flexibility for custom rendering scenarios, while ",[209,652,36],{}," continues to handle image optimization and data provisioning behind the scenes.",[360,655,656],{"id":228},[209,657,228],{},[206,659,660],{},"Path to image file",[206,662,663,665,666,668,669,672],{},[209,664,228],{}," should be in the form of an absolute path for static images in ",[209,667,353],{}," directory.\nOtherwise path that is expected by provider that starts with ",[209,670,671],{},"/"," or a URL.",[270,674,676],{"className":272,"code":675,"language":274,"meta":275,"style":275},"\u003CNuxtImg src=\"/nuxt.png\" />\n",[209,677,678],{"__ignoreMap":275},[279,679,680,682,684,686,688,690,693,695],{"class":281,"line":282},[279,681,286],{"class":285},[279,683,290],{"class":289},[279,685,294],{"class":293},[279,687,297],{"class":285},[279,689,300],{"class":285},[279,691,692],{"class":303},"/nuxt.png",[279,694,300],{"class":285},[279,696,309],{"class":285},[206,698,699,700,702,703,709],{},"For image optimization when using external URLs in ",[209,701,228],{},", we need to whitelist them using ",[344,704,706],{"href":705},"/get-started/configuration#domains",[209,707,708],{},"domains"," option.",[360,711,713,715,716],{"id":712},"width-height",[209,714,235],{}," / ",[209,717,239],{},[206,719,720],{},"Specify width/height of the image.",[217,722,723,726],{},[220,724,725],{},"Use desired width/height for static sized images like icons or avatars",[220,727,728,729,734],{},"Use original image width/height for responsive images (when using ",[344,730,732],{"href":731},"#sizes",[209,733,245],{},")",[360,736,737],{"id":407},[209,738,407],{},[206,740,741,742,744,745,751],{},"Although Nuxt Image does not apply any special handling, it's worth mentioning the ",[209,743,407],{}," attribute. It is a ",[344,746,750],{"href":747,"rel":748},"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt",[749],"nofollow","native"," global attribute that specifies an alternate text for an image, if the image cannot be displayed.",[206,753,754,755,759],{},"It ",[756,757,758],"em",{},"should always"," be provided.",[217,761,762,765,772],{},[220,763,764],{},"The text should describe the image if the image contains information",[220,766,767,768,771],{},"The text should explain where the link goes if the image is inside an ",[209,769,770],{},"\u003Ca>"," element",[220,773,774,775,778],{},"Use ",[209,776,777],{},"alt=\"\""," if the image is only for decoration",[270,780,782],{"className":272,"code":781,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  src=\"/nuxt.png\"\n  alt=\"My image file description\"\n/>\n",[209,783,784,790,802,815],{"__ignoreMap":275},[279,785,786,788],{"class":281,"line":282},[279,787,286],{"class":285},[279,789,446],{"class":289},[279,791,792,794,796,798,800],{"class":281,"line":449},[279,793,452],{"class":293},[279,795,297],{"class":285},[279,797,300],{"class":285},[279,799,692],{"class":303},[279,801,462],{"class":285},[279,803,804,806,808,810,813],{"class":281,"line":465},[279,805,468],{"class":293},[279,807,297],{"class":285},[279,809,300],{"class":285},[279,811,812],{"class":303},"My image file description",[279,814,462],{"class":285},[279,816,817],{"class":281,"line":480},[279,818,819],{"class":539},"/>\n",[360,821,822],{"id":245},[209,823,245],{},[206,825,826],{},"Specify responsive sizes.",[206,828,829,830,834],{},"This is a space-separated list of screen size/width pairs. You can ",[344,831,833],{"href":832},"/get-started/configuration#screens","see a list of the defined screen sizes here",".",[206,836,837,838,841],{},"By default Nuxt generates ",[756,839,840],{},"responsive-first"," sizing.",[217,843,844,851],{},[220,845,846,847,850],{},"If you omit a screen size prefix (like ",[209,848,849],{},"sm:",") then this size is the 'default' size of the image. Otherwise, Nuxt will pick the smallest size as the default size of the image.",[220,852,853,854,857,858,861,862,865,866,869],{},"This default size is used up until the next specified screen width, and so on. Each specified size pair applies ",[756,855,856],{},"up"," - so ",[209,859,860],{},"md:400px"," means that the image will be sized ",[209,863,864],{},"400px"," on ",[209,867,868],{},"md"," screens and up.",[206,871,872],{},[873,874,875],"strong",{},"Example:",[270,877,879],{"className":272,"code":878,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  src=\"/logos/nuxt.png\"\n  sizes=\"100vw sm:50vw md:400px\"\n/>\n",[209,880,881,887,900,914],{"__ignoreMap":275},[279,882,883,885],{"class":281,"line":282},[279,884,286],{"class":285},[279,886,446],{"class":289},[279,888,889,891,893,895,898],{"class":281,"line":449},[279,890,452],{"class":293},[279,892,297],{"class":285},[279,894,300],{"class":285},[279,896,897],{"class":303},"/logos/nuxt.png",[279,899,462],{"class":285},[279,901,902,905,907,909,912],{"class":281,"line":465},[279,903,904],{"class":293},"  sizes",[279,906,297],{"class":285},[279,908,300],{"class":285},[279,910,911],{"class":303},"100vw sm:50vw md:400px",[279,913,462],{"class":285},[279,915,916],{"class":281,"line":480},[279,917,819],{"class":539},[360,919,921],{"id":920},"densities",[209,922,920],{},[206,924,367,925,927],{},[209,926,920],{}," prop serves high-resolution images for Retina/HiDPI screens.",[206,929,930,931,834],{},"Nuxt Image generates multiple versions at different pixel densities and creates the appropriate ",[209,932,415],{},[206,934,935],{},"When you specify densities, Nuxt Image multiplies your base dimensions by each density value to generate the corresponding image sizes.",[206,937,938],{},[873,939,875],{},[270,941,943],{"className":272,"code":942,"language":274,"meta":275,"style":275},"\u003C!-- Small icon, sharp on all screen densities -->\n\u003CNuxtImg \n  src=\"/nuxt.png\"\n  height=\"50\"\n  densities=\"x1 x2\"\n/>\n",[209,944,945,951,960,972,985,999],{"__ignoreMap":275},[279,946,947],{"class":281,"line":282},[279,948,950],{"class":949},"sHwdD","\u003C!-- Small icon, sharp on all screen densities -->\n",[279,952,953,955,957],{"class":281,"line":449},[279,954,286],{"class":285},[279,956,290],{"class":289},[279,958,959],{"class":539}," \n",[279,961,962,964,966,968,970],{"class":281,"line":465},[279,963,452],{"class":293},[279,965,297],{"class":285},[279,967,300],{"class":285},[279,969,692],{"class":303},[279,971,462],{"class":285},[279,973,974,976,978,980,983],{"class":281,"line":480},[279,975,498],{"class":293},[279,977,297],{"class":285},[279,979,300],{"class":285},[279,981,982],{"class":303},"50",[279,984,462],{"class":285},[279,986,987,990,992,994,997],{"class":281,"line":495},[279,988,989],{"class":293},"  densities",[279,991,297],{"class":285},[279,993,300],{"class":285},[279,995,996],{"class":303},"x1 x2",[279,998,462],{"class":285},[279,1000,1001],{"class":281,"line":509},[279,1002,819],{"class":539},[206,1004,312],{},[270,1006,1008],{"className":315,"code":1007,"language":317,"meta":275,"style":275},"\u003C!-- Rendered HTML -->\n\u003Cimg\n  src=\"/_ipx/w_50/nuxt.png\"\n  srcset=\"/_ipx/w_50/nuxt.png 1x,\n          /_ipx/w_100/nuxt.png 2x\"\n/>\n",[209,1009,1010,1015,1022,1035,1047,1054],{"__ignoreMap":275},[279,1011,1012],{"class":281,"line":282},[279,1013,1014],{"class":949},"\u003C!-- Rendered HTML -->\n",[279,1016,1017,1019],{"class":281,"line":449},[279,1018,286],{"class":285},[279,1020,1021],{"class":289},"img\n",[279,1023,1024,1026,1028,1030,1033],{"class":281,"line":465},[279,1025,452],{"class":293},[279,1027,297],{"class":285},[279,1029,300],{"class":285},[279,1031,1032],{"class":303},"/_ipx/w_50/nuxt.png",[279,1034,462],{"class":285},[279,1036,1037,1040,1042,1044],{"class":281,"line":480},[279,1038,1039],{"class":293},"  srcset",[279,1041,297],{"class":285},[279,1043,300],{"class":285},[279,1045,1046],{"class":303},"/_ipx/w_50/nuxt.png 1x,\n",[279,1048,1049,1052],{"class":281,"line":495},[279,1050,1051],{"class":303},"          /_ipx/w_100/nuxt.png 2x",[279,1053,462],{"class":285},[279,1055,1056],{"class":281,"line":509},[279,1057,819],{"class":285},[360,1059,1061],{"id":1060},"placeholder",[209,1062,1060],{},[206,1064,1065],{},"Display a placeholder image before the actual image is fully loaded.",[206,1067,1068,1069,1073],{},"You can also use the ",[344,1070,1072],{"href":1071},"/usage/nuxt-img#custom","custom prop"," to make any placeholder you want.",[206,1075,1076],{},"The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case.",[270,1078,1080],{"className":272,"code":1079,"language":274,"meta":275,"style":275},"\u003C!-- Automatically generate a placeholder based on the original image -->\n\u003CNuxtImg src=\"/nuxt.png\" placeholder />\n\n\u003C!-- Set a width, height for the automatically generated placeholder  -->\n\u003CNuxtImg src=\"/nuxt.png\" :placeholder=\"[50, 25]\" />\n\n\u003C!-- Set a width, height, quality & blur for the automatically generated placeholder  -->\n\u003CNuxtImg src=\"/nuxt.png\" :placeholder=\"[50, 25, 75, 5]\" />\n\n\u003C!-- Set the width & height of the automatically generated placeholder, image will be a square -->\n\u003CNuxtImg src=\"/nuxt.png\" :placeholder=\"15\" />\n\n\u003C!-- Provide your own image -->\n\u003CNuxtImg src=\"/nuxt.png\" placeholder=\"./placeholder.png\" />\n",[209,1081,1082,1087,1108,1112,1117,1160,1164,1169,1217,1221,1226,1257,1261,1266],{"__ignoreMap":275},[279,1083,1084],{"class":281,"line":282},[279,1085,1086],{"class":949},"\u003C!-- Automatically generate a placeholder based on the original image -->\n",[279,1088,1089,1091,1093,1095,1097,1099,1101,1103,1106],{"class":281,"line":449},[279,1090,286],{"class":285},[279,1092,290],{"class":289},[279,1094,294],{"class":293},[279,1096,297],{"class":285},[279,1098,300],{"class":285},[279,1100,692],{"class":303},[279,1102,300],{"class":285},[279,1104,1105],{"class":293}," placeholder",[279,1107,309],{"class":285},[279,1109,1110],{"class":281,"line":465},[279,1111,603],{"emptyLinePlaceholder":602},[279,1113,1114],{"class":281,"line":480},[279,1115,1116],{"class":949},"\u003C!-- Set a width, height for the automatically generated placeholder  -->\n",[279,1118,1119,1121,1123,1125,1127,1129,1131,1133,1136,1138,1140,1142,1145,1148,1150,1153,1156,1158],{"class":281,"line":495},[279,1120,286],{"class":285},[279,1122,290],{"class":289},[279,1124,294],{"class":293},[279,1126,297],{"class":285},[279,1128,300],{"class":285},[279,1130,692],{"class":303},[279,1132,300],{"class":285},[279,1134,1135],{"class":285}," :",[279,1137,1060],{"class":293},[279,1139,297],{"class":285},[279,1141,300],{"class":285},[279,1143,1144],{"class":539},"[",[279,1146,982],{"class":1147},"sbssI",[279,1149,542],{"class":285},[279,1151,1152],{"class":1147}," 25",[279,1154,1155],{"class":539},"]",[279,1157,300],{"class":285},[279,1159,309],{"class":285},[279,1161,1162],{"class":281,"line":509},[279,1163,603],{"emptyLinePlaceholder":602},[279,1165,1166],{"class":281,"line":526},[279,1167,1168],{"class":949},"\u003C!-- Set a width, height, quality & blur for the automatically generated placeholder  -->\n",[279,1170,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1206,1208,1211,1213,1215],{"class":281,"line":558},[279,1172,286],{"class":285},[279,1174,290],{"class":289},[279,1176,294],{"class":293},[279,1178,297],{"class":285},[279,1180,300],{"class":285},[279,1182,692],{"class":303},[279,1184,300],{"class":285},[279,1186,1135],{"class":285},[279,1188,1060],{"class":293},[279,1190,297],{"class":285},[279,1192,300],{"class":285},[279,1194,1144],{"class":539},[279,1196,982],{"class":1147},[279,1198,542],{"class":285},[279,1200,1152],{"class":1147},[279,1202,542],{"class":285},[279,1204,1205],{"class":1147}," 75",[279,1207,542],{"class":285},[279,1209,1210],{"class":1147}," 5",[279,1212,1155],{"class":539},[279,1214,300],{"class":285},[279,1216,309],{"class":285},[279,1218,1219],{"class":281,"line":563},[279,1220,603],{"emptyLinePlaceholder":602},[279,1222,1223],{"class":281,"line":569},[279,1224,1225],{"class":949},"\u003C!-- Set the width & height of the automatically generated placeholder, image will be a square -->\n",[279,1227,1228,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1253,1255],{"class":281,"line":575},[279,1229,286],{"class":285},[279,1231,290],{"class":289},[279,1233,294],{"class":293},[279,1235,297],{"class":285},[279,1237,300],{"class":285},[279,1239,692],{"class":303},[279,1241,300],{"class":285},[279,1243,1135],{"class":285},[279,1245,1060],{"class":293},[279,1247,297],{"class":285},[279,1249,300],{"class":285},[279,1251,1252],{"class":1147},"15",[279,1254,300],{"class":285},[279,1256,309],{"class":285},[279,1258,1259],{"class":281,"line":581},[279,1260,603],{"emptyLinePlaceholder":602},[279,1262,1263],{"class":281,"line":587},[279,1264,1265],{"class":949},"\u003C!-- Provide your own image -->\n",[279,1267,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1291,1293],{"class":281,"line":593},[279,1269,286],{"class":285},[279,1271,290],{"class":289},[279,1273,294],{"class":293},[279,1275,297],{"class":285},[279,1277,300],{"class":285},[279,1279,692],{"class":303},[279,1281,300],{"class":285},[279,1283,1105],{"class":293},[279,1285,297],{"class":285},[279,1287,300],{"class":285},[279,1289,1290],{"class":303},"./placeholder.png",[279,1292,300],{"class":285},[279,1294,309],{"class":285},[206,1296,1297,1298,1302],{},"You can also leverage ",[344,1299,1300],{"href":45},[209,1301,44],{}," to generate a placeholder image based on the original image, can be useful if the source is an SVG or you want better control on the modifiers:",[270,1304,1306],{"className":272,"code":1305,"language":274,"meta":275,"style":275},"\u003Ctemplate>\n  \u003CNuxtImg\n    src=\"/nuxt.svg\"\n    :placeholder=\"img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })\"\n  />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst img = useImage()\n\u003C/script>\n",[209,1307,1308,1317,1324,1338,1352,1357,1365,1369,1393,1410],{"__ignoreMap":275},[279,1309,1310,1312,1315],{"class":281,"line":282},[279,1311,286],{"class":285},[279,1313,1314],{"class":289},"template",[279,1316,338],{"class":285},[279,1318,1319,1322],{"class":281,"line":449},[279,1320,1321],{"class":285},"  \u003C",[279,1323,446],{"class":289},[279,1325,1326,1329,1331,1333,1336],{"class":281,"line":465},[279,1327,1328],{"class":293},"    src",[279,1330,297],{"class":285},[279,1332,300],{"class":285},[279,1334,1335],{"class":303},"/nuxt.svg",[279,1337,462],{"class":285},[279,1339,1340,1343,1345,1347,1350],{"class":281,"line":480},[279,1341,1342],{"class":293},"    :placeholder",[279,1344,297],{"class":285},[279,1346,300],{"class":285},[279,1348,1349],{"class":303},"img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })",[279,1351,462],{"class":285},[279,1353,1354],{"class":281,"line":495},[279,1355,1356],{"class":285},"  />\n",[279,1358,1359,1361,1363],{"class":281,"line":509},[279,1360,643],{"class":285},[279,1362,1314],{"class":289},[279,1364,338],{"class":285},[279,1366,1367],{"class":281,"line":526},[279,1368,603],{"emptyLinePlaceholder":602},[279,1370,1371,1373,1376,1379,1382,1384,1386,1389,1391],{"class":281,"line":558},[279,1372,286],{"class":285},[279,1374,1375],{"class":289},"script",[279,1377,1378],{"class":293}," setup",[279,1380,1381],{"class":293}," lang",[279,1383,297],{"class":285},[279,1385,300],{"class":285},[279,1387,1388],{"class":303},"ts",[279,1390,300],{"class":285},[279,1392,338],{"class":285},[279,1394,1395,1398,1401,1403,1407],{"class":281,"line":563},[279,1396,1397],{"class":293},"const",[279,1399,1400],{"class":539}," img ",[279,1402,297],{"class":285},[279,1404,1406],{"class":1405},"s2Zo4"," useImage",[279,1408,1409],{"class":539},"()\n",[279,1411,1412,1414,1416],{"class":281,"line":569},[279,1413,643],{"class":285},[279,1415,1375],{"class":289},[279,1417,338],{"class":285},[360,1419,1421],{"id":1420},"placeholder-class",[209,1422,1420],{},[206,1424,1425,1426,1428,1429,1431],{},"When using a placeholder, you can use ",[209,1427,1420],{}," to apply a class to the original underlying ",[209,1430,214],{}," element (while the placeholder is being rendered).",[270,1433,1435],{"className":272,"code":1434,"language":274,"meta":275,"style":275},"\u003C!-- Apply a static class to the original image -->\n\u003CNuxtImg\n  src=\"/nuxt.png\"\n  placeholder\n  placeholder-class=\"custom\"\n/>\n\n\u003C!-- Apply a dynamic class to the original image -->\n\u003CNuxtImg\n  src=\"/nuxt.png\"\n  placeholder\n  :placeholder-class=\"custom\"\n/>\n",[209,1436,1437,1442,1448,1460,1465,1478,1482,1486,1491,1496,1501,1505,1510],{"__ignoreMap":275},[279,1438,1439],{"class":281,"line":282},[279,1440,1441],{"class":949},"\u003C!-- Apply a static class to the original image -->\n",[279,1443,1444,1446],{"class":281,"line":449},[279,1445,286],{"class":285},[279,1447,446],{"class":289},[279,1449,1450,1452,1454,1456,1458],{"class":281,"line":465},[279,1451,452],{"class":293},[279,1453,297],{"class":285},[279,1455,300],{"class":285},[279,1457,692],{"class":303},[279,1459,462],{"class":285},[279,1461,1462],{"class":281,"line":480},[279,1463,1464],{"class":293},"  placeholder\n",[279,1466,1467,1470,1472,1474,1476],{"class":281,"line":495},[279,1468,1469],{"class":293},"  placeholder-class",[279,1471,297],{"class":285},[279,1473,300],{"class":285},[279,1475,362],{"class":303},[279,1477,462],{"class":285},[279,1479,1480],{"class":281,"line":509},[279,1481,819],{"class":539},[279,1483,1484],{"class":281,"line":526},[279,1485,603],{"emptyLinePlaceholder":602},[279,1487,1488],{"class":281,"line":558},[279,1489,1490],{"class":539},"\u003C!-- Apply a dynamic class to the original image -->\n",[279,1492,1493],{"class":281,"line":563},[279,1494,1495],{"class":539},"\u003CNuxtImg\n",[279,1497,1498],{"class":281,"line":569},[279,1499,1500],{"class":539},"  src=\"/nuxt.png\"\n",[279,1502,1503],{"class":281,"line":575},[279,1504,1464],{"class":539},[279,1506,1507],{"class":281,"line":581},[279,1508,1509],{"class":539},"  :placeholder-class=\"custom\"\n",[279,1511,1512],{"class":281,"line":587},[279,1513,819],{"class":539},[1515,1516,1517,1524],"tip",{},[206,1518,1519,1520,1523],{},"If you need to apply some CSS to only the ",[756,1521,1522],{},"loaded"," image you can do so with something like:",[270,1525,1529],{"className":1526,"code":1527,"language":1528,"meta":275,"style":275},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","img:not(.my-placeholder-class) {\n  /* styles here */\n}\n","css",[209,1530,1531,1553,1558],{"__ignoreMap":275},[279,1532,1533,1536,1539,1542,1545,1548,1550],{"class":281,"line":282},[279,1534,264],{"class":1535},"sBMFI",[279,1537,1538],{"class":285},":",[279,1540,1541],{"class":293},"not",[279,1543,1544],{"class":285},"(.",[279,1546,1547],{"class":1535},"my-placeholder-class",[279,1549,734],{"class":285},[279,1551,1552],{"class":285}," {\n",[279,1554,1555],{"class":281,"line":449},[279,1556,1557],{"class":949},"  /* styles here */\n",[279,1559,1560],{"class":281,"line":465},[279,1561,1562],{"class":285},"}\n",[360,1564,1566],{"id":1565},"provider",[209,1567,1565],{},[206,1569,1570,1571,1575,1576],{},"Use other provider instead of default ",[344,1572,1574],{"href":1573},"/get-started/configuration#provider","provider option"," specified in ",[209,1577,1578],{},"nuxt.config",[206,1580,1581],{},[873,1582,875],{},[1584,1585,1586,1673],"code-group",{},[270,1587,1590],{"className":272,"code":1588,"filename":1589,"language":274,"meta":275,"style":275},"\u003Ctemplate>\n  \u003CNuxtImg\n    provider=\"cloudinary\"\n    src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n    width=\"300\"\n    height=\"169\"\n  />\n\u003C/template>\n","index.vue",[209,1591,1592,1600,1606,1620,1633,1647,1661,1665],{"__ignoreMap":275},[279,1593,1594,1596,1598],{"class":281,"line":282},[279,1595,286],{"class":285},[279,1597,1314],{"class":289},[279,1599,338],{"class":285},[279,1601,1602,1604],{"class":281,"line":449},[279,1603,1321],{"class":285},[279,1605,446],{"class":289},[279,1607,1608,1611,1613,1615,1618],{"class":281,"line":465},[279,1609,1610],{"class":293},"    provider",[279,1612,297],{"class":285},[279,1614,300],{"class":285},[279,1616,1617],{"class":303},"cloudinary",[279,1619,462],{"class":285},[279,1621,1622,1624,1626,1628,1631],{"class":281,"line":480},[279,1623,1328],{"class":293},[279,1625,297],{"class":285},[279,1627,300],{"class":285},[279,1629,1630],{"class":303},"/remote/nuxt-org/blog/going-full-static/main.png",[279,1632,462],{"class":285},[279,1634,1635,1638,1640,1642,1645],{"class":281,"line":495},[279,1636,1637],{"class":293},"    width",[279,1639,297],{"class":285},[279,1641,300],{"class":285},[279,1643,1644],{"class":303},"300",[279,1646,462],{"class":285},[279,1648,1649,1652,1654,1656,1659],{"class":281,"line":509},[279,1650,1651],{"class":293},"    height",[279,1653,297],{"class":285},[279,1655,300],{"class":285},[279,1657,1658],{"class":303},"169",[279,1660,462],{"class":285},[279,1662,1663],{"class":281,"line":526},[279,1664,1356],{"class":285},[279,1666,1667,1669,1671],{"class":281,"line":558},[279,1668,643],{"class":285},[279,1670,1314],{"class":289},[279,1672,338],{"class":285},[270,1674,1678],{"className":1675,"code":1676,"filename":1677,"language":1388,"meta":275,"style":275},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    cloudinary: {\n      baseURL: 'https://res.cloudinary.com/nuxt/image/upload'\n    }\n  }\n})\n","nuxt.config.ts",[209,1679,1680,1698,1707,1716,1732,1737,1742],{"__ignoreMap":275},[279,1681,1682,1686,1689,1692,1695],{"class":281,"line":282},[279,1683,1685],{"class":1684},"s7zQu","export",[279,1687,1688],{"class":1684}," default",[279,1690,1691],{"class":1405}," defineNuxtConfig",[279,1693,1694],{"class":539},"(",[279,1696,1697],{"class":285},"{\n",[279,1699,1700,1703,1705],{"class":281,"line":449},[279,1701,1702],{"class":289},"  image",[279,1704,1538],{"class":285},[279,1706,1552],{"class":285},[279,1708,1709,1712,1714],{"class":281,"line":465},[279,1710,1711],{"class":289},"    cloudinary",[279,1713,1538],{"class":285},[279,1715,1552],{"class":285},[279,1717,1718,1721,1723,1726,1729],{"class":281,"line":480},[279,1719,1720],{"class":289},"      baseURL",[279,1722,1538],{"class":285},[279,1724,1725],{"class":285}," '",[279,1727,1728],{"class":303},"https://res.cloudinary.com/nuxt/image/upload",[279,1730,1731],{"class":285},"'\n",[279,1733,1734],{"class":281,"line":495},[279,1735,1736],{"class":285},"    }\n",[279,1738,1739],{"class":281,"line":509},[279,1740,1741],{"class":285},"  }\n",[279,1743,1744,1746],{"class":281,"line":526},[279,1745,553],{"class":285},[279,1747,1748],{"class":539},")\n",[360,1750,1752],{"id":1751},"preset",[209,1753,1751],{},[206,1755,1756],{},"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects.",[340,1758,1759,1760,1764,1765],{},"We can define presets using ",[344,1761,1763],{"href":1762},"/get-started/configuration#presets","presets options"," in ",[209,1766,1578],{},[1584,1768,1769,1820],{},[270,1770,1772],{"className":272,"code":1771,"filename":1589,"language":274,"meta":275,"style":275},"\u003Ctemplate>\n  \u003CNuxtImg preset=\"cover\" src=\"/nuxt-icon.png\" />\n\u003C/template>\n",[209,1773,1774,1782,1812],{"__ignoreMap":275},[279,1775,1776,1778,1780],{"class":281,"line":282},[279,1777,286],{"class":285},[279,1779,1314],{"class":289},[279,1781,338],{"class":285},[279,1783,1784,1786,1788,1791,1793,1795,1798,1800,1802,1804,1806,1808,1810],{"class":281,"line":449},[279,1785,1321],{"class":285},[279,1787,290],{"class":289},[279,1789,1790],{"class":293}," preset",[279,1792,297],{"class":285},[279,1794,300],{"class":285},[279,1796,1797],{"class":303},"cover",[279,1799,300],{"class":285},[279,1801,294],{"class":293},[279,1803,297],{"class":285},[279,1805,300],{"class":285},[279,1807,304],{"class":303},[279,1809,300],{"class":285},[279,1811,309],{"class":285},[279,1813,1814,1816,1818],{"class":281,"line":465},[279,1815,643],{"class":285},[279,1817,1314],{"class":289},[279,1819,338],{"class":285},[270,1821,1823],{"className":1675,"code":1822,"filename":1677,"language":1388,"meta":275,"style":275},"export default defineNuxtConfig({\n  image: {\n    presets: {\n      cover: {\n        modifiers: {\n          fit: 'cover',\n          format: 'jpg',\n          width: 300,\n          height: 300\n        }\n      }\n    }\n  }\n})\n",[209,1824,1825,1837,1845,1854,1863,1872,1889,1905,1917,1927,1932,1937,1941,1945],{"__ignoreMap":275},[279,1826,1827,1829,1831,1833,1835],{"class":281,"line":282},[279,1828,1685],{"class":1684},[279,1830,1688],{"class":1684},[279,1832,1691],{"class":1405},[279,1834,1694],{"class":539},[279,1836,1697],{"class":285},[279,1838,1839,1841,1843],{"class":281,"line":449},[279,1840,1702],{"class":289},[279,1842,1538],{"class":285},[279,1844,1552],{"class":285},[279,1846,1847,1850,1852],{"class":281,"line":465},[279,1848,1849],{"class":289},"    presets",[279,1851,1538],{"class":285},[279,1853,1552],{"class":285},[279,1855,1856,1859,1861],{"class":281,"line":480},[279,1857,1858],{"class":289},"      cover",[279,1860,1538],{"class":285},[279,1862,1552],{"class":285},[279,1864,1865,1868,1870],{"class":281,"line":495},[279,1866,1867],{"class":289},"        modifiers",[279,1869,1538],{"class":285},[279,1871,1552],{"class":285},[279,1873,1874,1877,1879,1881,1883,1886],{"class":281,"line":509},[279,1875,1876],{"class":289},"          fit",[279,1878,1538],{"class":285},[279,1880,1725],{"class":285},[279,1882,1797],{"class":303},[279,1884,1885],{"class":285},"'",[279,1887,1888],{"class":285},",\n",[279,1890,1891,1894,1896,1898,1901,1903],{"class":281,"line":526},[279,1892,1893],{"class":289},"          format",[279,1895,1538],{"class":285},[279,1897,1725],{"class":285},[279,1899,1900],{"class":303},"jpg",[279,1902,1885],{"class":285},[279,1904,1888],{"class":285},[279,1906,1907,1910,1912,1915],{"class":281,"line":558},[279,1908,1909],{"class":289},"          width",[279,1911,1538],{"class":285},[279,1913,1914],{"class":1147}," 300",[279,1916,1888],{"class":285},[279,1918,1919,1922,1924],{"class":281,"line":563},[279,1920,1921],{"class":289},"          height",[279,1923,1538],{"class":285},[279,1925,1926],{"class":1147}," 300\n",[279,1928,1929],{"class":281,"line":569},[279,1930,1931],{"class":285},"        }\n",[279,1933,1934],{"class":281,"line":575},[279,1935,1936],{"class":285},"      }\n",[279,1938,1939],{"class":281,"line":581},[279,1940,1736],{"class":285},[279,1942,1943],{"class":281,"line":587},[279,1944,1741],{"class":285},[279,1946,1947,1949],{"class":281,"line":593},[279,1948,553],{"class":285},[279,1950,1748],{"class":539},[360,1952,1954],{"id":1953},"format",[209,1955,1953],{},[206,1957,1958],{},"In case you want to serve images in a specific format, use this prop.",[270,1960,1962],{"className":272,"code":1961,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  format=\"webp\"\n  src=\"/nuxt-icon.png\"\n/>\n",[209,1963,1964,1970,1984,1996],{"__ignoreMap":275},[279,1965,1966,1968],{"class":281,"line":282},[279,1967,286],{"class":285},[279,1969,446],{"class":289},[279,1971,1972,1975,1977,1979,1982],{"class":281,"line":449},[279,1973,1974],{"class":293},"  format",[279,1976,297],{"class":285},[279,1978,300],{"class":285},[279,1980,1981],{"class":303},"webp",[279,1983,462],{"class":285},[279,1985,1986,1988,1990,1992,1994],{"class":281,"line":465},[279,1987,452],{"class":293},[279,1989,297],{"class":285},[279,1991,300],{"class":285},[279,1993,304],{"class":303},[279,1995,462],{"class":285},[279,1997,1998],{"class":281,"line":480},[279,1999,819],{"class":539},[206,2001,2002,2003,408,2005,408,2008,408,2011,408,2013,408,2016,236,2019,2022],{},"Available formats are ",[209,2004,1981],{},[209,2006,2007],{},"avif",[209,2009,2010],{},"jpeg",[209,2012,1900],{},[209,2014,2015],{},"png",[209,2017,2018],{},"gif",[209,2020,2021],{},"svg",". If the format is not specified, it will respect the default image format.",[360,2024,2026],{"id":2025},"quality",[209,2027,2025],{},[206,2029,2030],{},"The quality for the generated image(s).",[270,2032,2034],{"className":272,"code":2033,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  src=\"/nuxt.jpg\"\n  quality=\"80\"\n  width=\"200\"\n  height=\"100\"\n/>\n",[209,2035,2036,2042,2055,2069,2082,2095],{"__ignoreMap":275},[279,2037,2038,2040],{"class":281,"line":282},[279,2039,286],{"class":285},[279,2041,446],{"class":289},[279,2043,2044,2046,2048,2050,2053],{"class":281,"line":449},[279,2045,452],{"class":293},[279,2047,297],{"class":285},[279,2049,300],{"class":285},[279,2051,2052],{"class":303},"/nuxt.jpg",[279,2054,462],{"class":285},[279,2056,2057,2060,2062,2064,2067],{"class":281,"line":465},[279,2058,2059],{"class":293},"  quality",[279,2061,297],{"class":285},[279,2063,300],{"class":285},[279,2065,2066],{"class":303},"80",[279,2068,462],{"class":285},[279,2070,2071,2073,2075,2077,2080],{"class":281,"line":480},[279,2072,483],{"class":293},[279,2074,297],{"class":285},[279,2076,300],{"class":285},[279,2078,2079],{"class":303},"200",[279,2081,462],{"class":285},[279,2083,2084,2086,2088,2090,2093],{"class":281,"line":495},[279,2085,498],{"class":293},[279,2087,297],{"class":285},[279,2089,300],{"class":285},[279,2091,2092],{"class":303},"100",[279,2094,462],{"class":285},[279,2096,2097],{"class":281,"line":509},[279,2098,819],{"class":539},[360,2100,2102],{"id":2101},"fit",[209,2103,2101],{},[206,2105,367,2106,2108],{},[209,2107,2101],{}," property specifies the size of the images.\nThere are five standard values you can use with this property.",[217,2110,2111,2116,2122,2128,2134],{},[220,2112,2113,2115],{},[209,2114,1797],{},": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit",[220,2117,2118,2121],{},[209,2119,2120],{},"contain",": Preserving aspect ratio, contain within both provided dimensions using 'letterboxing' where necessary.",[220,2123,2124,2127],{},[209,2125,2126],{},"fill",": Ignore the aspect ratio of the input and stretch to both provided dimensions.",[220,2129,2130,2133],{},[209,2131,2132],{},"inside",": Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.",[220,2135,2136,2139],{},[209,2137,2138],{},"outside",": Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.",[270,2141,2143],{"className":272,"code":2142,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  fit=\"cover\"\n  src=\"/nuxt-icon.png\"\n  width=\"200\"\n  height=\"100\"\n/>\n",[209,2144,2145,2151,2164,2176,2188,2200],{"__ignoreMap":275},[279,2146,2147,2149],{"class":281,"line":282},[279,2148,286],{"class":285},[279,2150,446],{"class":289},[279,2152,2153,2156,2158,2160,2162],{"class":281,"line":449},[279,2154,2155],{"class":293},"  fit",[279,2157,297],{"class":285},[279,2159,300],{"class":285},[279,2161,1797],{"class":303},[279,2163,462],{"class":285},[279,2165,2166,2168,2170,2172,2174],{"class":281,"line":465},[279,2167,452],{"class":293},[279,2169,297],{"class":285},[279,2171,300],{"class":285},[279,2173,304],{"class":303},[279,2175,462],{"class":285},[279,2177,2178,2180,2182,2184,2186],{"class":281,"line":480},[279,2179,483],{"class":293},[279,2181,297],{"class":285},[279,2183,300],{"class":285},[279,2185,2079],{"class":303},[279,2187,462],{"class":285},[279,2189,2190,2192,2194,2196,2198],{"class":281,"line":495},[279,2191,498],{"class":293},[279,2193,297],{"class":285},[279,2195,300],{"class":285},[279,2197,2092],{"class":303},[279,2199,462],{"class":285},[279,2201,2202],{"class":281,"line":509},[279,2203,819],{"class":539},[340,2205,2206],{},"Some providers support other values.",[360,2208,2210],{"id":2209},"modifiers",[209,2211,2209],{},[206,2213,2214],{},"In addition to the standard modifiers, each provider might have its own additional modifiers. Because these modifiers depend on the provider, refer to its documentation to know what can be used.",[206,2216,2217,2218,2220],{},"Using the ",[209,2219,2209],{}," prop lets you use any of these transformations.",[206,2222,2223],{},[873,2224,875],{},[270,2226,2228],{"className":272,"code":2227,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  provider=\"cloudinary\"\n  src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n  width=\"300\"\n  height=\"169\"\n  :modifiers=\"{ roundCorner: '0:100' }\"\n/>\n",[209,2229,2230,2236,2249,2261,2273,2285,2314],{"__ignoreMap":275},[279,2231,2232,2234],{"class":281,"line":282},[279,2233,286],{"class":285},[279,2235,446],{"class":289},[279,2237,2238,2241,2243,2245,2247],{"class":281,"line":449},[279,2239,2240],{"class":293},"  provider",[279,2242,297],{"class":285},[279,2244,300],{"class":285},[279,2246,1617],{"class":303},[279,2248,462],{"class":285},[279,2250,2251,2253,2255,2257,2259],{"class":281,"line":465},[279,2252,452],{"class":293},[279,2254,297],{"class":285},[279,2256,300],{"class":285},[279,2258,1630],{"class":303},[279,2260,462],{"class":285},[279,2262,2263,2265,2267,2269,2271],{"class":281,"line":480},[279,2264,483],{"class":293},[279,2266,297],{"class":285},[279,2268,300],{"class":285},[279,2270,1644],{"class":303},[279,2272,462],{"class":285},[279,2274,2275,2277,2279,2281,2283],{"class":281,"line":495},[279,2276,498],{"class":293},[279,2278,297],{"class":285},[279,2280,300],{"class":285},[279,2282,1658],{"class":303},[279,2284,462],{"class":285},[279,2286,2287,2289,2291,2293,2295,2297,2300,2302,2304,2307,2309,2312],{"class":281,"line":509},[279,2288,512],{"class":285},[279,2290,2209],{"class":293},[279,2292,297],{"class":285},[279,2294,300],{"class":285},[279,2296,536],{"class":285},[279,2298,2299],{"class":289}," roundCorner",[279,2301,1538],{"class":285},[279,2303,1725],{"class":285},[279,2305,2306],{"class":303},"0:100",[279,2308,1885],{"class":285},[279,2310,2311],{"class":285}," }",[279,2313,462],{"class":285},[279,2315,2316],{"class":281,"line":526},[279,2317,819],{"class":539},[360,2319,2321],{"id":2320},"preload",[209,2322,2320],{},[206,2324,2325,2326,2329],{},"In case you want to preload the image, use this prop. This will place a corresponding ",[209,2327,2328],{},"link"," tag in the page's head.",[270,2331,2333],{"className":272,"code":2332,"language":274,"meta":275,"style":275},"\u003CNuxtImg src=\"/nuxt-icon.png\" preload />\n",[209,2334,2335],{"__ignoreMap":275},[279,2336,2337,2339,2341,2343,2345,2347,2349,2351,2354],{"class":281,"line":282},[279,2338,286],{"class":285},[279,2340,290],{"class":289},[279,2342,294],{"class":293},[279,2344,297],{"class":285},[279,2346,300],{"class":285},[279,2348,304],{"class":303},[279,2350,300],{"class":285},[279,2352,2353],{"class":293}," preload",[279,2355,309],{"class":285},[360,2357,2359],{"id":2358},"loading",[209,2360,2358],{},[206,2362,2363,2364,2368,2369,2374],{},"This is a ",[344,2365,750],{"href":2366,"rel":2367},"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading",[749]," attribute that provides a hint\nto the browser on how to handle the loading of an image which is outside the viewport.\nIt is ",[344,2370,2373],{"href":2371,"rel":2372},"https://caniuse.com/loading-lazy-attr",[749],"supported"," by the latest version of all major browsers since March 2022.",[206,2376,2377,2378,2381],{},"Set ",[209,2379,2380],{},"loading=\"lazy\""," to defer loading of an image until it appears in the viewport.",[270,2383,2385],{"className":272,"code":2384,"language":274,"meta":275,"style":275},"\u003CNuxtImg src=\"/nuxt-icon.png\" loading=\"lazy\" />\n",[209,2386,2387],{"__ignoreMap":275},[279,2388,2389,2391,2393,2395,2397,2399,2401,2403,2406,2408,2410,2413,2415],{"class":281,"line":282},[279,2390,286],{"class":285},[279,2392,290],{"class":289},[279,2394,294],{"class":293},[279,2396,297],{"class":285},[279,2398,300],{"class":285},[279,2400,304],{"class":303},[279,2402,300],{"class":285},[279,2404,2405],{"class":293}," loading",[279,2407,297],{"class":285},[279,2409,300],{"class":285},[279,2411,2412],{"class":303},"lazy",[279,2414,300],{"class":285},[279,2416,309],{"class":285},[360,2418,2420],{"id":2419},"nonce",[209,2421,2419],{},[206,2423,2363,2424,2428,2429,2432,2433,2436],{},[344,2425,750],{"href":2426,"rel":2427},"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce",[749]," global attribute that defines a cryptographic nonce (number used once) that can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed for a given element.\nProviding a nonce allows you to avoid using the CSP ",[209,2430,2431],{},"unsafe-inline"," directive, which would allowlist ",[756,2434,2435],{},"all"," inline script or styles.",[270,2438,2440],{"className":272,"code":2439,"language":274,"meta":275,"style":275},"\u003Ctemplate>\n  \u003CNuxtImg\n    src=\"/nuxt-icon.png\"\n    :nonce=\"nonce\"\n  />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\n// useNonce is not provided by @nuxt/image but might be\n// provided by another module, for example nuxt-security\nconst nonce = useNonce()\n\u003C/script>\n",[209,2441,2442,2450,2456,2468,2481,2485,2493,2497,2517,2522,2527,2541],{"__ignoreMap":275},[279,2443,2444,2446,2448],{"class":281,"line":282},[279,2445,286],{"class":285},[279,2447,1314],{"class":289},[279,2449,338],{"class":285},[279,2451,2452,2454],{"class":281,"line":449},[279,2453,1321],{"class":285},[279,2455,446],{"class":289},[279,2457,2458,2460,2462,2464,2466],{"class":281,"line":465},[279,2459,1328],{"class":293},[279,2461,297],{"class":285},[279,2463,300],{"class":285},[279,2465,304],{"class":303},[279,2467,462],{"class":285},[279,2469,2470,2473,2475,2477,2479],{"class":281,"line":480},[279,2471,2472],{"class":293},"    :nonce",[279,2474,297],{"class":285},[279,2476,300],{"class":285},[279,2478,2419],{"class":303},[279,2480,462],{"class":285},[279,2482,2483],{"class":281,"line":495},[279,2484,1356],{"class":285},[279,2486,2487,2489,2491],{"class":281,"line":509},[279,2488,643],{"class":285},[279,2490,1314],{"class":289},[279,2492,338],{"class":285},[279,2494,2495],{"class":281,"line":526},[279,2496,603],{"emptyLinePlaceholder":602},[279,2498,2499,2501,2503,2505,2507,2509,2511,2513,2515],{"class":281,"line":558},[279,2500,286],{"class":285},[279,2502,1375],{"class":289},[279,2504,1378],{"class":293},[279,2506,1381],{"class":293},[279,2508,297],{"class":285},[279,2510,300],{"class":285},[279,2512,1388],{"class":303},[279,2514,300],{"class":285},[279,2516,338],{"class":285},[279,2518,2519],{"class":281,"line":563},[279,2520,2521],{"class":949},"// useNonce is not provided by @nuxt/image but might be\n",[279,2523,2524],{"class":281,"line":569},[279,2525,2526],{"class":949},"// provided by another module, for example nuxt-security\n",[279,2528,2529,2531,2534,2536,2539],{"class":281,"line":575},[279,2530,1397],{"class":293},[279,2532,2533],{"class":539}," nonce ",[279,2535,297],{"class":285},[279,2537,2538],{"class":1405}," useNonce",[279,2540,1409],{"class":539},[279,2542,2543,2545,2547],{"class":281,"line":581},[279,2544,643],{"class":285},[279,2546,1375],{"class":289},[279,2548,338],{"class":285},[254,2550,2552],{"id":2551},"events","Events",[206,2554,2555,2556,2558,2559,236,2561,2563],{},"Native events emitted by the ",[209,2557,214],{}," element contained by ",[209,2560,36],{},[209,2562,40],{}," components are re-emitted and can be listened to.",[206,2565,2566,2568,2569,2572,2573],{},[873,2567,875],{}," Listen to the native ",[209,2570,2571],{},"onLoad"," event from ",[209,2574,36],{},[270,2576,2578],{"className":272,"code":2577,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  src=\"/images/colors.jpg\"\n  width=\"500\"\n  height=\"500\"\n  @load=\"doSomethingOnLoad\"\n/>\n",[209,2579,2580,2586,2599,2612,2624,2641],{"__ignoreMap":275},[279,2581,2582,2584],{"class":281,"line":282},[279,2583,286],{"class":285},[279,2585,446],{"class":289},[279,2587,2588,2590,2592,2594,2597],{"class":281,"line":449},[279,2589,452],{"class":293},[279,2591,297],{"class":285},[279,2593,300],{"class":285},[279,2595,2596],{"class":303},"/images/colors.jpg",[279,2598,462],{"class":285},[279,2600,2601,2603,2605,2607,2610],{"class":281,"line":465},[279,2602,483],{"class":293},[279,2604,297],{"class":285},[279,2606,300],{"class":285},[279,2608,2609],{"class":303},"500",[279,2611,462],{"class":285},[279,2613,2614,2616,2618,2620,2622],{"class":281,"line":480},[279,2615,498],{"class":293},[279,2617,297],{"class":285},[279,2619,300],{"class":285},[279,2621,2609],{"class":303},[279,2623,462],{"class":285},[279,2625,2626,2629,2632,2634,2636,2639],{"class":281,"line":495},[279,2627,2628],{"class":285},"  @",[279,2630,2631],{"class":293},"load",[279,2633,297],{"class":285},[279,2635,300],{"class":285},[279,2637,2638],{"class":539},"doSomethingOnLoad",[279,2640,462],{"class":285},[279,2642,2643],{"class":281,"line":509},[279,2644,819],{"class":539},[2646,2647,2648],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":275,"searchDepth":449,"depth":449,"links":2650},[2651,2652,2672],{"id":256,"depth":449,"text":31},{"id":357,"depth":449,"text":358,"children":2653},[2654,2655,2656,2658,2659,2660,2661,2662,2663,2664,2665,2666,2667,2668,2669,2670,2671],{"id":362,"depth":465,"text":362},{"id":228,"depth":465,"text":228},{"id":712,"depth":465,"text":2657},"width / height",{"id":407,"depth":465,"text":407},{"id":245,"depth":465,"text":245},{"id":920,"depth":465,"text":920},{"id":1060,"depth":465,"text":1060},{"id":1420,"depth":465,"text":1420},{"id":1565,"depth":465,"text":1565},{"id":1751,"depth":465,"text":1751},{"id":1953,"depth":465,"text":1953},{"id":2025,"depth":465,"text":2025},{"id":2101,"depth":465,"text":2101},{"id":2209,"depth":465,"text":2209},{"id":2320,"depth":465,"text":2320},{"id":2358,"depth":465,"text":2358},{"id":2419,"depth":465,"text":2419},{"id":2551,"depth":449,"text":2552},"Discover how to use and configure the Nuxt Image component.",[2675],{"label":2676,"icon":2677,"to":2678,"size":2679},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtImg.vue","xs",{},{"title":36,"description":2673},"MTtzXv61sdw6GZ_861UK4gX7pI2Qq-hQlzh6E_4Wxn8",[2684,2686],{"title":26,"path":27,"stem":28,"description":2685,"children":-1},"A comprehensive guide to migrate your application from Nuxt Image v1 to Nuxt Image v2.",{"title":40,"path":41,"stem":42,"description":2687,"children":-1},"Discover how to use and configure the Nuxt Picture component.",1768848074612]