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