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