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