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