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