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