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