[{"data":1,"prerenderedAt":2746},["ShallowReactive",2],{"navigation_docs":3,"-usage-nuxt-img":200,"-usage-nuxt-img-surround":2741},[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":2731,"extension":868,"links":2732,"meta":2738,"navigation":602,"path":37,"seo":2739,"stem":38,"__hash__":2740},"docs/2.usage/1.nuxt-img.md",{"type":203,"value":204,"toc":2707},"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,1478,1483,1492,1574,1623,1628,1639,1643,1808,1813,1816,1826,2009,2014,2017,2058,2080,2085,2088,2156,2161,2166,2197,2261,2264,2269,2272,2278,2282,2375,2380,2387,2413,2418,2432,2439,2474,2479,2494,2607,2611,2622,2633,2703],[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,1413,1418,1426,1430,1454,1470],{"__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,1349,1352,1355,1358,1360,1362,1365,1368,1371,1374,1376,1379,1381,1384,1387,1389,1391,1394,1396,1399,1401,1404,1406,1408,1411],{"class":281,"line":480},[279,1341,1342],{"class":285},"    :",[279,1344,1060],{"class":293},[279,1346,297],{"class":285},[279,1348,300],{"class":285},[279,1350,264],{"class":1351},"s2Zo4",[279,1353,1354],{"class":285},"(",[279,1356,1357],{"class":285},"`",[279,1359,1335],{"class":303},[279,1361,1357],{"class":285},[279,1363,1364],{"class":285},", { ",[279,1366,1367],{"class":289},"h",[279,1369,1370],{"class":285},": ",[279,1372,1373],{"class":1147},"10",[279,1375,408],{"class":285},[279,1377,1378],{"class":289},"f",[279,1380,1370],{"class":285},[279,1382,1383],{"class":285},"'",[279,1385,1386],{"class":303},"png",[279,1388,1383],{"class":285},[279,1390,408],{"class":285},[279,1392,1393],{"class":289},"blur",[279,1395,1370],{"class":285},[279,1397,1398],{"class":1147},"2",[279,1400,408],{"class":285},[279,1402,1403],{"class":289},"q",[279,1405,1370],{"class":285},[279,1407,982],{"class":1147},[279,1409,1410],{"class":285}," })",[279,1412,462],{"class":285},[279,1414,1415],{"class":281,"line":495},[279,1416,1417],{"class":285},"  />\n",[279,1419,1420,1422,1424],{"class":281,"line":509},[279,1421,643],{"class":285},[279,1423,1314],{"class":289},[279,1425,338],{"class":285},[279,1427,1428],{"class":281,"line":526},[279,1429,603],{"emptyLinePlaceholder":602},[279,1431,1432,1434,1437,1440,1443,1445,1447,1450,1452],{"class":281,"line":558},[279,1433,286],{"class":285},[279,1435,1436],{"class":289},"script",[279,1438,1439],{"class":293}," setup",[279,1441,1442],{"class":293}," lang",[279,1444,297],{"class":285},[279,1446,300],{"class":285},[279,1448,1449],{"class":303},"ts",[279,1451,300],{"class":285},[279,1453,338],{"class":285},[279,1455,1456,1459,1462,1464,1467],{"class":281,"line":563},[279,1457,1458],{"class":293},"const",[279,1460,1461],{"class":539}," img ",[279,1463,297],{"class":285},[279,1465,1466],{"class":1351}," useImage",[279,1468,1469],{"class":539},"()\n",[279,1471,1472,1474,1476],{"class":281,"line":569},[279,1473,643],{"class":285},[279,1475,1436],{"class":289},[279,1477,338],{"class":285},[360,1479,1481],{"id":1480},"placeholder-class",[209,1482,1480],{},[206,1484,1485,1486,1488,1489,1491],{},"When using a placeholder, you can use ",[209,1487,1480],{}," to apply a class to the original underlying ",[209,1490,214],{}," element (while the placeholder is being rendered).",[270,1493,1495],{"className":272,"code":1494,"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,1496,1497,1502,1508,1520,1525,1538,1542,1546,1551,1556,1561,1565,1570],{"__ignoreMap":275},[279,1498,1499],{"class":281,"line":282},[279,1500,1501],{"class":949},"\u003C!-- Apply a static class to the original image -->\n",[279,1503,1504,1506],{"class":281,"line":449},[279,1505,286],{"class":285},[279,1507,446],{"class":289},[279,1509,1510,1512,1514,1516,1518],{"class":281,"line":465},[279,1511,452],{"class":293},[279,1513,297],{"class":285},[279,1515,300],{"class":285},[279,1517,692],{"class":303},[279,1519,462],{"class":285},[279,1521,1522],{"class":281,"line":480},[279,1523,1524],{"class":293},"  placeholder\n",[279,1526,1527,1530,1532,1534,1536],{"class":281,"line":495},[279,1528,1529],{"class":293},"  placeholder-class",[279,1531,297],{"class":285},[279,1533,300],{"class":285},[279,1535,362],{"class":303},[279,1537,462],{"class":285},[279,1539,1540],{"class":281,"line":509},[279,1541,819],{"class":539},[279,1543,1544],{"class":281,"line":526},[279,1545,603],{"emptyLinePlaceholder":602},[279,1547,1548],{"class":281,"line":558},[279,1549,1550],{"class":539},"\u003C!-- Apply a dynamic class to the original image -->\n",[279,1552,1553],{"class":281,"line":563},[279,1554,1555],{"class":539},"\u003CNuxtImg\n",[279,1557,1558],{"class":281,"line":569},[279,1559,1560],{"class":539},"  src=\"/nuxt.png\"\n",[279,1562,1563],{"class":281,"line":575},[279,1564,1524],{"class":539},[279,1566,1567],{"class":281,"line":581},[279,1568,1569],{"class":539},"  :placeholder-class=\"custom\"\n",[279,1571,1572],{"class":281,"line":587},[279,1573,819],{"class":539},[1575,1576,1577,1584],"tip",{},[206,1578,1579,1580,1583],{},"If you need to apply some CSS to only the ",[756,1581,1582],{},"loaded"," image you can do so with something like:",[270,1585,1589],{"className":1586,"code":1587,"language":1588,"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,1590,1591,1613,1618],{"__ignoreMap":275},[279,1592,1593,1596,1599,1602,1605,1608,1610],{"class":281,"line":282},[279,1594,264],{"class":1595},"sBMFI",[279,1597,1598],{"class":285},":",[279,1600,1601],{"class":293},"not",[279,1603,1604],{"class":285},"(.",[279,1606,1607],{"class":1595},"my-placeholder-class",[279,1609,734],{"class":285},[279,1611,1612],{"class":285}," {\n",[279,1614,1615],{"class":281,"line":449},[279,1616,1617],{"class":949},"  /* styles here */\n",[279,1619,1620],{"class":281,"line":465},[279,1621,1622],{"class":285},"}\n",[360,1624,1626],{"id":1625},"provider",[209,1627,1625],{},[206,1629,1630,1631,1635,1636],{},"Use other provider instead of default ",[344,1632,1634],{"href":1633},"/get-started/configuration#provider","provider option"," specified in ",[209,1637,1638],{},"nuxt.config",[206,1640,1641],{},[873,1642,875],{},[1644,1645,1646,1733],"code-group",{},[270,1647,1650],{"className":272,"code":1648,"filename":1649,"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,1651,1652,1660,1666,1680,1693,1707,1721,1725],{"__ignoreMap":275},[279,1653,1654,1656,1658],{"class":281,"line":282},[279,1655,286],{"class":285},[279,1657,1314],{"class":289},[279,1659,338],{"class":285},[279,1661,1662,1664],{"class":281,"line":449},[279,1663,1321],{"class":285},[279,1665,446],{"class":289},[279,1667,1668,1671,1673,1675,1678],{"class":281,"line":465},[279,1669,1670],{"class":293},"    provider",[279,1672,297],{"class":285},[279,1674,300],{"class":285},[279,1676,1677],{"class":303},"cloudinary",[279,1679,462],{"class":285},[279,1681,1682,1684,1686,1688,1691],{"class":281,"line":480},[279,1683,1328],{"class":293},[279,1685,297],{"class":285},[279,1687,300],{"class":285},[279,1689,1690],{"class":303},"/remote/nuxt-org/blog/going-full-static/main.png",[279,1692,462],{"class":285},[279,1694,1695,1698,1700,1702,1705],{"class":281,"line":495},[279,1696,1697],{"class":293},"    width",[279,1699,297],{"class":285},[279,1701,300],{"class":285},[279,1703,1704],{"class":303},"300",[279,1706,462],{"class":285},[279,1708,1709,1712,1714,1716,1719],{"class":281,"line":509},[279,1710,1711],{"class":293},"    height",[279,1713,297],{"class":285},[279,1715,300],{"class":285},[279,1717,1718],{"class":303},"169",[279,1720,462],{"class":285},[279,1722,1723],{"class":281,"line":526},[279,1724,1417],{"class":285},[279,1726,1727,1729,1731],{"class":281,"line":558},[279,1728,643],{"class":285},[279,1730,1314],{"class":289},[279,1732,338],{"class":285},[270,1734,1738],{"className":1735,"code":1736,"filename":1737,"language":1449,"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,1739,1740,1757,1766,1775,1791,1796,1801],{"__ignoreMap":275},[279,1741,1742,1746,1749,1752,1754],{"class":281,"line":282},[279,1743,1745],{"class":1744},"s7zQu","export",[279,1747,1748],{"class":1744}," default",[279,1750,1751],{"class":1351}," defineNuxtConfig",[279,1753,1354],{"class":539},[279,1755,1756],{"class":285},"{\n",[279,1758,1759,1762,1764],{"class":281,"line":449},[279,1760,1761],{"class":289},"  image",[279,1763,1598],{"class":285},[279,1765,1612],{"class":285},[279,1767,1768,1771,1773],{"class":281,"line":465},[279,1769,1770],{"class":289},"    cloudinary",[279,1772,1598],{"class":285},[279,1774,1612],{"class":285},[279,1776,1777,1780,1782,1785,1788],{"class":281,"line":480},[279,1778,1779],{"class":289},"      baseURL",[279,1781,1598],{"class":285},[279,1783,1784],{"class":285}," '",[279,1786,1787],{"class":303},"https://res.cloudinary.com/nuxt/image/upload",[279,1789,1790],{"class":285},"'\n",[279,1792,1793],{"class":281,"line":495},[279,1794,1795],{"class":285},"    }\n",[279,1797,1798],{"class":281,"line":509},[279,1799,1800],{"class":285},"  }\n",[279,1802,1803,1805],{"class":281,"line":526},[279,1804,553],{"class":285},[279,1806,1807],{"class":539},")\n",[360,1809,1811],{"id":1810},"preset",[209,1812,1810],{},[206,1814,1815],{},"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects.",[340,1817,1818,1819,1823,1824],{},"We can define presets using ",[344,1820,1822],{"href":1821},"/get-started/configuration#presets","presets options"," in ",[209,1825,1638],{},[1644,1827,1828,1879],{},[270,1829,1831],{"className":272,"code":1830,"filename":1649,"language":274,"meta":275,"style":275},"\u003Ctemplate>\n  \u003CNuxtImg preset=\"cover\" src=\"/nuxt-icon.png\" />\n\u003C/template>\n",[209,1832,1833,1841,1871],{"__ignoreMap":275},[279,1834,1835,1837,1839],{"class":281,"line":282},[279,1836,286],{"class":285},[279,1838,1314],{"class":289},[279,1840,338],{"class":285},[279,1842,1843,1845,1847,1850,1852,1854,1857,1859,1861,1863,1865,1867,1869],{"class":281,"line":449},[279,1844,1321],{"class":285},[279,1846,290],{"class":289},[279,1848,1849],{"class":293}," preset",[279,1851,297],{"class":285},[279,1853,300],{"class":285},[279,1855,1856],{"class":303},"cover",[279,1858,300],{"class":285},[279,1860,294],{"class":293},[279,1862,297],{"class":285},[279,1864,300],{"class":285},[279,1866,304],{"class":303},[279,1868,300],{"class":285},[279,1870,309],{"class":285},[279,1872,1873,1875,1877],{"class":281,"line":465},[279,1874,643],{"class":285},[279,1876,1314],{"class":289},[279,1878,338],{"class":285},[270,1880,1882],{"className":1735,"code":1881,"filename":1737,"language":1449,"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,1883,1884,1896,1904,1913,1922,1931,1947,1963,1975,1985,1990,1995,1999,2003],{"__ignoreMap":275},[279,1885,1886,1888,1890,1892,1894],{"class":281,"line":282},[279,1887,1745],{"class":1744},[279,1889,1748],{"class":1744},[279,1891,1751],{"class":1351},[279,1893,1354],{"class":539},[279,1895,1756],{"class":285},[279,1897,1898,1900,1902],{"class":281,"line":449},[279,1899,1761],{"class":289},[279,1901,1598],{"class":285},[279,1903,1612],{"class":285},[279,1905,1906,1909,1911],{"class":281,"line":465},[279,1907,1908],{"class":289},"    presets",[279,1910,1598],{"class":285},[279,1912,1612],{"class":285},[279,1914,1915,1918,1920],{"class":281,"line":480},[279,1916,1917],{"class":289},"      cover",[279,1919,1598],{"class":285},[279,1921,1612],{"class":285},[279,1923,1924,1927,1929],{"class":281,"line":495},[279,1925,1926],{"class":289},"        modifiers",[279,1928,1598],{"class":285},[279,1930,1612],{"class":285},[279,1932,1933,1936,1938,1940,1942,1944],{"class":281,"line":509},[279,1934,1935],{"class":289},"          fit",[279,1937,1598],{"class":285},[279,1939,1784],{"class":285},[279,1941,1856],{"class":303},[279,1943,1383],{"class":285},[279,1945,1946],{"class":285},",\n",[279,1948,1949,1952,1954,1956,1959,1961],{"class":281,"line":526},[279,1950,1951],{"class":289},"          format",[279,1953,1598],{"class":285},[279,1955,1784],{"class":285},[279,1957,1958],{"class":303},"jpg",[279,1960,1383],{"class":285},[279,1962,1946],{"class":285},[279,1964,1965,1968,1970,1973],{"class":281,"line":558},[279,1966,1967],{"class":289},"          width",[279,1969,1598],{"class":285},[279,1971,1972],{"class":1147}," 300",[279,1974,1946],{"class":285},[279,1976,1977,1980,1982],{"class":281,"line":563},[279,1978,1979],{"class":289},"          height",[279,1981,1598],{"class":285},[279,1983,1984],{"class":1147}," 300\n",[279,1986,1987],{"class":281,"line":569},[279,1988,1989],{"class":285},"        }\n",[279,1991,1992],{"class":281,"line":575},[279,1993,1994],{"class":285},"      }\n",[279,1996,1997],{"class":281,"line":581},[279,1998,1795],{"class":285},[279,2000,2001],{"class":281,"line":587},[279,2002,1800],{"class":285},[279,2004,2005,2007],{"class":281,"line":593},[279,2006,553],{"class":285},[279,2008,1807],{"class":539},[360,2010,2012],{"id":2011},"format",[209,2013,2011],{},[206,2015,2016],{},"In case you want to serve images in a specific format, use this prop.",[270,2018,2020],{"className":272,"code":2019,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  format=\"webp\"\n  src=\"/nuxt-icon.png\"\n/>\n",[209,2021,2022,2028,2042,2054],{"__ignoreMap":275},[279,2023,2024,2026],{"class":281,"line":282},[279,2025,286],{"class":285},[279,2027,446],{"class":289},[279,2029,2030,2033,2035,2037,2040],{"class":281,"line":449},[279,2031,2032],{"class":293},"  format",[279,2034,297],{"class":285},[279,2036,300],{"class":285},[279,2038,2039],{"class":303},"webp",[279,2041,462],{"class":285},[279,2043,2044,2046,2048,2050,2052],{"class":281,"line":465},[279,2045,452],{"class":293},[279,2047,297],{"class":285},[279,2049,300],{"class":285},[279,2051,304],{"class":303},[279,2053,462],{"class":285},[279,2055,2056],{"class":281,"line":480},[279,2057,819],{"class":539},[206,2059,2060,2061,408,2063,408,2066,408,2069,408,2071,408,2073,236,2076,2079],{},"Available formats are ",[209,2062,2039],{},[209,2064,2065],{},"avif",[209,2067,2068],{},"jpeg",[209,2070,1958],{},[209,2072,1386],{},[209,2074,2075],{},"gif",[209,2077,2078],{},"svg",". If the format is not specified, it will respect the default image format.",[360,2081,2083],{"id":2082},"quality",[209,2084,2082],{},[206,2086,2087],{},"The quality for the generated image(s).",[270,2089,2091],{"className":272,"code":2090,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  src=\"/nuxt.jpg\"\n  quality=\"80\"\n  width=\"200\"\n  height=\"100\"\n/>\n",[209,2092,2093,2099,2112,2126,2139,2152],{"__ignoreMap":275},[279,2094,2095,2097],{"class":281,"line":282},[279,2096,286],{"class":285},[279,2098,446],{"class":289},[279,2100,2101,2103,2105,2107,2110],{"class":281,"line":449},[279,2102,452],{"class":293},[279,2104,297],{"class":285},[279,2106,300],{"class":285},[279,2108,2109],{"class":303},"/nuxt.jpg",[279,2111,462],{"class":285},[279,2113,2114,2117,2119,2121,2124],{"class":281,"line":465},[279,2115,2116],{"class":293},"  quality",[279,2118,297],{"class":285},[279,2120,300],{"class":285},[279,2122,2123],{"class":303},"80",[279,2125,462],{"class":285},[279,2127,2128,2130,2132,2134,2137],{"class":281,"line":480},[279,2129,483],{"class":293},[279,2131,297],{"class":285},[279,2133,300],{"class":285},[279,2135,2136],{"class":303},"200",[279,2138,462],{"class":285},[279,2140,2141,2143,2145,2147,2150],{"class":281,"line":495},[279,2142,498],{"class":293},[279,2144,297],{"class":285},[279,2146,300],{"class":285},[279,2148,2149],{"class":303},"100",[279,2151,462],{"class":285},[279,2153,2154],{"class":281,"line":509},[279,2155,819],{"class":539},[360,2157,2159],{"id":2158},"fit",[209,2160,2158],{},[206,2162,367,2163,2165],{},[209,2164,2158],{}," property specifies the size of the images.\nThere are five standard values you can use with this property.",[217,2167,2168,2173,2179,2185,2191],{},[220,2169,2170,2172],{},[209,2171,1856],{},": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit",[220,2174,2175,2178],{},[209,2176,2177],{},"contain",": Preserving aspect ratio, contain within both provided dimensions using 'letterboxing' where necessary.",[220,2180,2181,2184],{},[209,2182,2183],{},"fill",": Ignore the aspect ratio of the input and stretch to both provided dimensions.",[220,2186,2187,2190],{},[209,2188,2189],{},"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,2192,2193,2196],{},[209,2194,2195],{},"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,2198,2200],{"className":272,"code":2199,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  fit=\"cover\"\n  src=\"/nuxt-icon.png\"\n  width=\"200\"\n  height=\"100\"\n/>\n",[209,2201,2202,2208,2221,2233,2245,2257],{"__ignoreMap":275},[279,2203,2204,2206],{"class":281,"line":282},[279,2205,286],{"class":285},[279,2207,446],{"class":289},[279,2209,2210,2213,2215,2217,2219],{"class":281,"line":449},[279,2211,2212],{"class":293},"  fit",[279,2214,297],{"class":285},[279,2216,300],{"class":285},[279,2218,1856],{"class":303},[279,2220,462],{"class":285},[279,2222,2223,2225,2227,2229,2231],{"class":281,"line":465},[279,2224,452],{"class":293},[279,2226,297],{"class":285},[279,2228,300],{"class":285},[279,2230,304],{"class":303},[279,2232,462],{"class":285},[279,2234,2235,2237,2239,2241,2243],{"class":281,"line":480},[279,2236,483],{"class":293},[279,2238,297],{"class":285},[279,2240,300],{"class":285},[279,2242,2136],{"class":303},[279,2244,462],{"class":285},[279,2246,2247,2249,2251,2253,2255],{"class":281,"line":495},[279,2248,498],{"class":293},[279,2250,297],{"class":285},[279,2252,300],{"class":285},[279,2254,2149],{"class":303},[279,2256,462],{"class":285},[279,2258,2259],{"class":281,"line":509},[279,2260,819],{"class":539},[340,2262,2263],{},"Some providers support other values.",[360,2265,2267],{"id":2266},"modifiers",[209,2268,2266],{},[206,2270,2271],{},"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,2273,2274,2275,2277],{},"Using the ",[209,2276,2266],{}," prop lets you use any of these transformations.",[206,2279,2280],{},[873,2281,875],{},[270,2283,2285],{"className":272,"code":2284,"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,2286,2287,2293,2306,2318,2330,2342,2371],{"__ignoreMap":275},[279,2288,2289,2291],{"class":281,"line":282},[279,2290,286],{"class":285},[279,2292,446],{"class":289},[279,2294,2295,2298,2300,2302,2304],{"class":281,"line":449},[279,2296,2297],{"class":293},"  provider",[279,2299,297],{"class":285},[279,2301,300],{"class":285},[279,2303,1677],{"class":303},[279,2305,462],{"class":285},[279,2307,2308,2310,2312,2314,2316],{"class":281,"line":465},[279,2309,452],{"class":293},[279,2311,297],{"class":285},[279,2313,300],{"class":285},[279,2315,1690],{"class":303},[279,2317,462],{"class":285},[279,2319,2320,2322,2324,2326,2328],{"class":281,"line":480},[279,2321,483],{"class":293},[279,2323,297],{"class":285},[279,2325,300],{"class":285},[279,2327,1704],{"class":303},[279,2329,462],{"class":285},[279,2331,2332,2334,2336,2338,2340],{"class":281,"line":495},[279,2333,498],{"class":293},[279,2335,297],{"class":285},[279,2337,300],{"class":285},[279,2339,1718],{"class":303},[279,2341,462],{"class":285},[279,2343,2344,2346,2348,2350,2352,2354,2357,2359,2361,2364,2366,2369],{"class":281,"line":509},[279,2345,512],{"class":285},[279,2347,2266],{"class":293},[279,2349,297],{"class":285},[279,2351,300],{"class":285},[279,2353,536],{"class":285},[279,2355,2356],{"class":289}," roundCorner",[279,2358,1598],{"class":285},[279,2360,1784],{"class":285},[279,2362,2363],{"class":303},"0:100",[279,2365,1383],{"class":285},[279,2367,2368],{"class":285}," }",[279,2370,462],{"class":285},[279,2372,2373],{"class":281,"line":526},[279,2374,819],{"class":539},[360,2376,2378],{"id":2377},"preload",[209,2379,2377],{},[206,2381,2382,2383,2386],{},"In case you want to preload the image, use this prop. This will place a corresponding ",[209,2384,2385],{},"link"," tag in the page's head.",[270,2388,2390],{"className":272,"code":2389,"language":274,"meta":275,"style":275},"\u003CNuxtImg src=\"/nuxt-icon.png\" preload />\n",[209,2391,2392],{"__ignoreMap":275},[279,2393,2394,2396,2398,2400,2402,2404,2406,2408,2411],{"class":281,"line":282},[279,2395,286],{"class":285},[279,2397,290],{"class":289},[279,2399,294],{"class":293},[279,2401,297],{"class":285},[279,2403,300],{"class":285},[279,2405,304],{"class":303},[279,2407,300],{"class":285},[279,2409,2410],{"class":293}," preload",[279,2412,309],{"class":285},[360,2414,2416],{"id":2415},"loading",[209,2417,2415],{},[206,2419,2420,2421,2425,2426,2431],{},"This is a ",[344,2422,750],{"href":2423,"rel":2424},"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,2427,2430],{"href":2428,"rel":2429},"https://caniuse.com/loading-lazy-attr",[749],"supported"," by the latest version of all major browsers since March 2022.",[206,2433,2434,2435,2438],{},"Set ",[209,2436,2437],{},"loading=\"lazy\""," to defer loading of an image until it appears in the viewport.",[270,2440,2442],{"className":272,"code":2441,"language":274,"meta":275,"style":275},"\u003CNuxtImg src=\"/nuxt-icon.png\" loading=\"lazy\" />\n",[209,2443,2444],{"__ignoreMap":275},[279,2445,2446,2448,2450,2452,2454,2456,2458,2460,2463,2465,2467,2470,2472],{"class":281,"line":282},[279,2447,286],{"class":285},[279,2449,290],{"class":289},[279,2451,294],{"class":293},[279,2453,297],{"class":285},[279,2455,300],{"class":285},[279,2457,304],{"class":303},[279,2459,300],{"class":285},[279,2461,2462],{"class":293}," loading",[279,2464,297],{"class":285},[279,2466,300],{"class":285},[279,2468,2469],{"class":303},"lazy",[279,2471,300],{"class":285},[279,2473,309],{"class":285},[360,2475,2477],{"id":2476},"nonce",[209,2478,2476],{},[206,2480,2420,2481,2485,2486,2489,2490,2493],{},[344,2482,750],{"href":2483,"rel":2484},"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,2487,2488],{},"unsafe-inline"," directive, which would allowlist ",[756,2491,2492],{},"all"," inline script or styles.",[270,2495,2497],{"className":272,"code":2496,"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,2498,2499,2507,2513,2525,2539,2543,2551,2555,2575,2580,2585,2599],{"__ignoreMap":275},[279,2500,2501,2503,2505],{"class":281,"line":282},[279,2502,286],{"class":285},[279,2504,1314],{"class":289},[279,2506,338],{"class":285},[279,2508,2509,2511],{"class":281,"line":449},[279,2510,1321],{"class":285},[279,2512,446],{"class":289},[279,2514,2515,2517,2519,2521,2523],{"class":281,"line":465},[279,2516,1328],{"class":293},[279,2518,297],{"class":285},[279,2520,300],{"class":285},[279,2522,304],{"class":303},[279,2524,462],{"class":285},[279,2526,2527,2529,2531,2533,2535,2537],{"class":281,"line":480},[279,2528,1342],{"class":285},[279,2530,2476],{"class":293},[279,2532,297],{"class":285},[279,2534,300],{"class":285},[279,2536,2476],{"class":539},[279,2538,462],{"class":285},[279,2540,2541],{"class":281,"line":495},[279,2542,1417],{"class":285},[279,2544,2545,2547,2549],{"class":281,"line":509},[279,2546,643],{"class":285},[279,2548,1314],{"class":289},[279,2550,338],{"class":285},[279,2552,2553],{"class":281,"line":526},[279,2554,603],{"emptyLinePlaceholder":602},[279,2556,2557,2559,2561,2563,2565,2567,2569,2571,2573],{"class":281,"line":558},[279,2558,286],{"class":285},[279,2560,1436],{"class":289},[279,2562,1439],{"class":293},[279,2564,1442],{"class":293},[279,2566,297],{"class":285},[279,2568,300],{"class":285},[279,2570,1449],{"class":303},[279,2572,300],{"class":285},[279,2574,338],{"class":285},[279,2576,2577],{"class":281,"line":563},[279,2578,2579],{"class":949},"// useNonce is not provided by @nuxt/image but might be\n",[279,2581,2582],{"class":281,"line":569},[279,2583,2584],{"class":949},"// provided by another module, for example nuxt-security\n",[279,2586,2587,2589,2592,2594,2597],{"class":281,"line":575},[279,2588,1458],{"class":293},[279,2590,2591],{"class":539}," nonce ",[279,2593,297],{"class":285},[279,2595,2596],{"class":1351}," useNonce",[279,2598,1469],{"class":539},[279,2600,2601,2603,2605],{"class":281,"line":581},[279,2602,643],{"class":285},[279,2604,1436],{"class":289},[279,2606,338],{"class":285},[254,2608,2610],{"id":2609},"events","Events",[206,2612,2613,2614,2616,2617,236,2619,2621],{},"Native events emitted by the ",[209,2615,214],{}," element contained by ",[209,2618,36],{},[209,2620,40],{}," components are re-emitted and can be listened to.",[206,2623,2624,2626,2627,2630,2631],{},[873,2625,875],{}," Listen to the native ",[209,2628,2629],{},"onLoad"," event from ",[209,2632,36],{},[270,2634,2636],{"className":272,"code":2635,"language":274,"meta":275,"style":275},"\u003CNuxtImg\n  src=\"/images/colors.jpg\"\n  width=\"500\"\n  height=\"500\"\n  @load=\"doSomethingOnLoad\"\n/>\n",[209,2637,2638,2644,2657,2670,2682,2699],{"__ignoreMap":275},[279,2639,2640,2642],{"class":281,"line":282},[279,2641,286],{"class":285},[279,2643,446],{"class":289},[279,2645,2646,2648,2650,2652,2655],{"class":281,"line":449},[279,2647,452],{"class":293},[279,2649,297],{"class":285},[279,2651,300],{"class":285},[279,2653,2654],{"class":303},"/images/colors.jpg",[279,2656,462],{"class":285},[279,2658,2659,2661,2663,2665,2668],{"class":281,"line":465},[279,2660,483],{"class":293},[279,2662,297],{"class":285},[279,2664,300],{"class":285},[279,2666,2667],{"class":303},"500",[279,2669,462],{"class":285},[279,2671,2672,2674,2676,2678,2680],{"class":281,"line":480},[279,2673,498],{"class":293},[279,2675,297],{"class":285},[279,2677,300],{"class":285},[279,2679,2667],{"class":303},[279,2681,462],{"class":285},[279,2683,2684,2687,2690,2692,2694,2697],{"class":281,"line":495},[279,2685,2686],{"class":285},"  @",[279,2688,2689],{"class":293},"load",[279,2691,297],{"class":285},[279,2693,300],{"class":285},[279,2695,2696],{"class":539},"doSomethingOnLoad",[279,2698,462],{"class":285},[279,2700,2701],{"class":281,"line":509},[279,2702,819],{"class":539},[2704,2705,2706],"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":2708},[2709,2710,2730],{"id":256,"depth":449,"text":31},{"id":357,"depth":449,"text":358,"children":2711},[2712,2713,2714,2716,2717,2718,2719,2720,2721,2722,2723,2724,2725,2726,2727,2728,2729],{"id":362,"depth":465,"text":362},{"id":228,"depth":465,"text":228},{"id":712,"depth":465,"text":2715},"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":1480,"depth":465,"text":1480},{"id":1625,"depth":465,"text":1625},{"id":1810,"depth":465,"text":1810},{"id":2011,"depth":465,"text":2011},{"id":2082,"depth":465,"text":2082},{"id":2158,"depth":465,"text":2158},{"id":2266,"depth":465,"text":2266},{"id":2377,"depth":465,"text":2377},{"id":2415,"depth":465,"text":2415},{"id":2476,"depth":465,"text":2476},{"id":2609,"depth":449,"text":2610},"Discover how to use and configure the Nuxt Image component.",[2733],{"label":2734,"icon":2735,"to":2736,"size":2737},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtImg.vue","xs",{},{"title":36,"description":2731},"eaPwbNoOxc-HLVOY6QHwWQK5ifLOmGfq3ZXXgygunFg",[2742,2744],{"title":26,"path":27,"stem":28,"description":2743,"children":-1},"A comprehensive guide to migrate your application from Nuxt Image v1 to Nuxt Image v2.",{"title":40,"path":41,"stem":42,"description":2745,"children":-1},"Discover how to use and configure the Nuxt Picture component.",1767881374596]