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