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