[{"data":1,"prerenderedAt":4021},["Reactive",2],{"navigation":3,"docs-/usage/nuxt-img":112,"docs-/usage/nuxt-img-surround":3340},[4,17,30,102],{"title":5,"_path":6,"children":7},"Get Started","/get-started",[8,11,14],{"title":9,"_path":10},"Installation","/get-started/installation",{"title":12,"_path":13},"Configuration","/get-started/configuration",{"title":15,"_path":16},"Providers","/get-started/providers",{"title":18,"_path":19,"children":20},"Usage","/usage",[21,24,27],{"title":22,"_path":23},"\u003CNuxtImg>","/usage/nuxt-img",{"title":25,"_path":26},"\u003CNuxtPicture>","/usage/nuxt-picture",{"title":28,"_path":29},"useImage()","/usage/use-image",{"title":15,"_path":31,"children":32},"/providers",[33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99],{"title":34,"_path":35},"Cloudflare","/providers/cloudflare",{"title":37,"_path":38},"Cloudimage","/providers/cloudimage",{"title":40,"_path":41},"Cloudinary","/providers/cloudinary",{"title":43,"_path":44},"Contentful","/providers/contentful",{"title":46,"_path":47},"Directus","/providers/directus",{"title":49,"_path":50},"Edgio","/providers/edgio",{"title":52,"_path":53},"Fastly","/providers/fastly",{"title":55,"_path":56},"Glide","/providers/glide",{"title":58,"_path":59},"Gumlet","/providers/gumlet",{"title":61,"_path":62},"ImageEngine","/providers/imageengine",{"title":64,"_path":65},"ImageKit","/providers/imagekit",{"title":67,"_path":68},"Imgix","/providers/imgix",{"title":70,"_path":71},"IPX","/providers/ipx",{"title":73,"_path":74},"Netlify","/providers/netlify",{"title":76,"_path":77},"Prepr","/providers/prepr",{"title":79,"_path":80},"Prismic","/providers/prismic",{"title":82,"_path":83},"Sanity","/providers/sanity",{"title":85,"_path":86},"Storyblok","/providers/storyblok",{"title":88,"_path":89},"Strapi","/providers/strapi",{"title":91,"_path":92},"Twicpics","/providers/twicpics",{"title":94,"_path":95},"Unsplash","/providers/unsplash",{"title":97,"_path":98},"Uploadcare","/providers/uploadcare",{"title":100,"_path":101},"Vercel","/providers/vercel",{"title":103,"_path":104,"children":105},"Advanced","/advanced",[106,109],{"title":107,"_path":108},"Custom Provider","/advanced/custom-provider",{"title":110,"_path":111},"Static Images","/advanced/static-images",{"_path":23,"_dir":113,"_draft":114,"_partial":114,"_locale":115,"title":22,"description":116,"body":117,"_type":3335,"_id":3336,"_source":3337,"_file":3338,"_extension":3339},"usage",false,"","Discover how to use and configure the Nuxt Image component.",{"type":118,"children":119,"toc":3315},"root",[120,140,202,207,229,292,297,343,373,379,387,392,414,461,483,497,502,525,532,537,550,559,647,655,660,667,831,839,844,849,1229,1243,1434,1442,1460,1467,1814,1822,1827,1847,2272,2279,2284,2364,2411,2419,2424,2546,2553,2564,2616,2734,2742,2749,2754,2765,2772,2935,2943,2955,3009,3017,3041,3053,3124,3130,3152,3172,3309],{"type":121,"tag":122,"props":123,"children":124},"element","p",{},[125,131,133,138],{"type":121,"tag":126,"props":127,"children":128},"code",{},[129],{"type":130,"value":22},"text",{"type":130,"value":132}," is a drop-in replacement for the native ",{"type":121,"tag":126,"props":134,"children":135},{},[136],{"type":130,"value":137},"\u003Cimg>",{"type":130,"value":139}," tag.",{"type":121,"tag":141,"props":142,"children":143},"ul",{},[144,150,162,179,191],{"type":121,"tag":145,"props":146,"children":147},"li",{},[148],{"type":130,"value":149},"Uses built-in provider to optimize local and remote images",{"type":121,"tag":145,"props":151,"children":152},{},[153,155,160],{"type":130,"value":154},"Converts ",{"type":121,"tag":126,"props":156,"children":157},{},[158],{"type":130,"value":159},"src",{"type":130,"value":161}," to provider optimized URLs",{"type":121,"tag":145,"props":163,"children":164},{},[165,167,172,174],{"type":130,"value":166},"Automatically resizes images based on ",{"type":121,"tag":126,"props":168,"children":169},{},[170],{"type":130,"value":171},"width",{"type":130,"value":173}," and ",{"type":121,"tag":126,"props":175,"children":176},{},[177],{"type":130,"value":178},"height",{"type":121,"tag":145,"props":180,"children":181},{},[182,184,189],{"type":130,"value":183},"Generates responsive sizes when providing ",{"type":121,"tag":126,"props":185,"children":186},{},[187],{"type":130,"value":188},"sizes",{"type":130,"value":190}," option",{"type":121,"tag":145,"props":192,"children":193},{},[194,196,200],{"type":130,"value":195},"Supports native lazy loading as well as other ",{"type":121,"tag":126,"props":197,"children":198},{},[199],{"type":130,"value":137},{"type":130,"value":201}," attributes",{"type":121,"tag":203,"props":204,"children":205},"h2",{"id":113},[206],{"type":130,"value":18},{"type":121,"tag":122,"props":208,"children":209},{},[210,214,216,221,223,227],{"type":121,"tag":126,"props":211,"children":212},{},[213],{"type":130,"value":22},{"type":130,"value":215}," outputs a native ",{"type":121,"tag":126,"props":217,"children":218},{},[219],{"type":130,"value":220},"img",{"type":130,"value":222}," tag directly (without any wrapper around it). Use it like you would use the ",{"type":121,"tag":126,"props":224,"children":225},{},[226],{"type":130,"value":137},{"type":130,"value":228}," tag:",{"type":121,"tag":230,"props":231,"children":235},"pre",{"className":232,"code":233,"language":234,"meta":115},"language-html material-theme_material-theme-palenight_material-theme-lighter","\u003CNuxtImg src=\"/nuxt-icon.png\" />\n","html",[236],{"type":121,"tag":126,"props":237,"children":238},{"__ignoreMap":115},[239],{"type":121,"tag":240,"props":241,"children":244},"span",{"class":242,"line":243},"line",1,[245,251,257,262,267,272,277,283,287],{"type":121,"tag":240,"props":246,"children":248},{"class":247},"ct-542793",[249],{"type":130,"value":250},"\u003C",{"type":121,"tag":240,"props":252,"children":254},{"class":253},"ct-821147",[255],{"type":130,"value":256},"NuxtImg",{"type":121,"tag":240,"props":258,"children":259},{"class":247},[260],{"type":130,"value":261}," ",{"type":121,"tag":240,"props":263,"children":265},{"class":264},"ct-366012",[266],{"type":130,"value":159},{"type":121,"tag":240,"props":268,"children":269},{"class":247},[270],{"type":130,"value":271},"=",{"type":121,"tag":240,"props":273,"children":274},{"class":247},[275],{"type":130,"value":276},"\"",{"type":121,"tag":240,"props":278,"children":280},{"class":279},"ct-083593",[281],{"type":130,"value":282},"/nuxt-icon.png",{"type":121,"tag":240,"props":284,"children":285},{"class":247},[286],{"type":130,"value":276},{"type":121,"tag":240,"props":288,"children":289},{"class":247},[290],{"type":130,"value":291}," />",{"type":121,"tag":122,"props":293,"children":294},{},[295],{"type":130,"value":296},"Will result in:",{"type":121,"tag":230,"props":298,"children":300},{"className":232,"code":299,"language":234,"meta":115},"\u003Cimg src=\"/nuxt-icon.png\" />\n",[301],{"type":121,"tag":126,"props":302,"children":303},{"__ignoreMap":115},[304],{"type":121,"tag":240,"props":305,"children":306},{"class":242,"line":243},[307,311,315,319,323,327,331,335,339],{"type":121,"tag":240,"props":308,"children":309},{"class":247},[310],{"type":130,"value":250},{"type":121,"tag":240,"props":312,"children":313},{"class":253},[314],{"type":130,"value":220},{"type":121,"tag":240,"props":316,"children":317},{"class":247},[318],{"type":130,"value":261},{"type":121,"tag":240,"props":320,"children":321},{"class":264},[322],{"type":130,"value":159},{"type":121,"tag":240,"props":324,"children":325},{"class":247},[326],{"type":130,"value":271},{"type":121,"tag":240,"props":328,"children":329},{"class":247},[330],{"type":130,"value":276},{"type":121,"tag":240,"props":332,"children":333},{"class":279},[334],{"type":130,"value":282},{"type":121,"tag":240,"props":336,"children":337},{"class":247},[338],{"type":130,"value":276},{"type":121,"tag":240,"props":340,"children":341},{"class":247},[342],{"type":130,"value":291},{"type":121,"tag":344,"props":345,"children":346},"callout",{},[347],{"type":121,"tag":122,"props":348,"children":349},{},[350,352,358,360,364,366,371],{"type":130,"value":351},"With ",{"type":121,"tag":353,"props":354,"children":355},"a",{"href":16},[356],{"type":130,"value":357},"default provider",{"type":130,"value":359},", you should put ",{"type":121,"tag":126,"props":361,"children":362},{},[363],{"type":130,"value":282},{"type":130,"value":365}," inside ",{"type":121,"tag":126,"props":367,"children":368},{},[369],{"type":130,"value":370},"public/",{"type":130,"value":372}," directory for Nuxt 3 make the above example work.",{"type":121,"tag":203,"props":374,"children":376},{"id":375},"props",[377],{"type":130,"value":378},"Props",{"type":121,"tag":380,"props":381,"children":382},"h3",{"id":159},[383],{"type":121,"tag":126,"props":384,"children":385},{},[386],{"type":130,"value":159},{"type":121,"tag":122,"props":388,"children":389},{},[390],{"type":130,"value":391},"Path to image file",{"type":121,"tag":122,"props":393,"children":394},{},[395,399,401,405,407,412],{"type":121,"tag":126,"props":396,"children":397},{},[398],{"type":130,"value":159},{"type":130,"value":400}," should be in the form of an absolute path for static images in ",{"type":121,"tag":126,"props":402,"children":403},{},[404],{"type":130,"value":370},{"type":130,"value":406}," directory.\nOtherwise path that is expected by provider that starts with ",{"type":121,"tag":126,"props":408,"children":409},{},[410],{"type":130,"value":411},"/",{"type":130,"value":413}," or a URL.",{"type":121,"tag":230,"props":415,"children":417},{"className":232,"code":416,"language":234,"meta":115},"\u003CNuxtImg src=\"/nuxt.png\" />\n",[418],{"type":121,"tag":126,"props":419,"children":420},{"__ignoreMap":115},[421],{"type":121,"tag":240,"props":422,"children":423},{"class":242,"line":243},[424,428,432,436,440,444,448,453,457],{"type":121,"tag":240,"props":425,"children":426},{"class":247},[427],{"type":130,"value":250},{"type":121,"tag":240,"props":429,"children":430},{"class":253},[431],{"type":130,"value":256},{"type":121,"tag":240,"props":433,"children":434},{"class":247},[435],{"type":130,"value":261},{"type":121,"tag":240,"props":437,"children":438},{"class":264},[439],{"type":130,"value":159},{"type":121,"tag":240,"props":441,"children":442},{"class":247},[443],{"type":130,"value":271},{"type":121,"tag":240,"props":445,"children":446},{"class":247},[447],{"type":130,"value":276},{"type":121,"tag":240,"props":449,"children":450},{"class":279},[451],{"type":130,"value":452},"/nuxt.png",{"type":121,"tag":240,"props":454,"children":455},{"class":247},[456],{"type":130,"value":276},{"type":121,"tag":240,"props":458,"children":459},{"class":247},[460],{"type":130,"value":291},{"type":121,"tag":122,"props":462,"children":463},{},[464,466,470,472,481],{"type":130,"value":465},"For image optimization when using external urls in ",{"type":121,"tag":126,"props":467,"children":468},{},[469],{"type":130,"value":159},{"type":130,"value":471},", we need to whitelist them using ",{"type":121,"tag":353,"props":473,"children":475},{"href":474},"/get-started/configuration#domains",[476],{"type":121,"tag":126,"props":477,"children":478},{},[479],{"type":130,"value":480},"domains",{"type":130,"value":482}," option.",{"type":121,"tag":380,"props":484,"children":486},{"id":485},"width-height",[487,491,493],{"type":121,"tag":126,"props":488,"children":489},{},[490],{"type":130,"value":171},{"type":130,"value":492}," / ",{"type":121,"tag":126,"props":494,"children":495},{},[496],{"type":130,"value":178},{"type":121,"tag":122,"props":498,"children":499},{},[500],{"type":130,"value":501},"Specify width/height of the image.",{"type":121,"tag":141,"props":503,"children":504},{},[505,510],{"type":121,"tag":145,"props":506,"children":507},{},[508],{"type":130,"value":509},"Use desired width/height for static sized images like icons or avatars",{"type":121,"tag":145,"props":511,"children":512},{},[513,515,523],{"type":130,"value":514},"Use original image width/height for responsive images (when using ",{"type":121,"tag":353,"props":516,"children":518},{"href":517},"#sizes",[519],{"type":121,"tag":126,"props":520,"children":521},{},[522],{"type":130,"value":188},{"type":130,"value":524},")",{"type":121,"tag":380,"props":526,"children":527},{"id":188},[528],{"type":121,"tag":126,"props":529,"children":530},{},[531],{"type":130,"value":188},{"type":121,"tag":122,"props":533,"children":534},{},[535],{"type":130,"value":536},"Specify responsive sizes.",{"type":121,"tag":122,"props":538,"children":539},{},[540,542,548],{"type":130,"value":541},"This a space-separated list of screen size/width pairs. You can ",{"type":121,"tag":353,"props":543,"children":545},{"href":544},"/get-started/configuration#screens",[546],{"type":130,"value":547},"see a list of the defined screen sizes here",{"type":130,"value":549},").",{"type":121,"tag":122,"props":551,"children":552},{},[553],{"type":121,"tag":554,"props":555,"children":556},"strong",{},[557],{"type":130,"value":558},"Example:",{"type":121,"tag":230,"props":560,"children":562},{"className":232,"code":561,"language":234,"meta":115},"\u003CNuxtImg\n  src=\"/logos/nuxt.png\"\n  sizes=\"sm:100vw md:50vw lg:400px\"\n  />\n",[563],{"type":121,"tag":126,"props":564,"children":565},{"__ignoreMap":115},[566,578,609,638],{"type":121,"tag":240,"props":567,"children":568},{"class":242,"line":243},[569,573],{"type":121,"tag":240,"props":570,"children":571},{"class":247},[572],{"type":130,"value":250},{"type":121,"tag":240,"props":574,"children":575},{"class":253},[576],{"type":130,"value":577},"NuxtImg\n",{"type":121,"tag":240,"props":579,"children":581},{"class":242,"line":580},2,[582,587,591,595,599,604],{"type":121,"tag":240,"props":583,"children":584},{"class":247},[585],{"type":130,"value":586},"  ",{"type":121,"tag":240,"props":588,"children":589},{"class":264},[590],{"type":130,"value":159},{"type":121,"tag":240,"props":592,"children":593},{"class":247},[594],{"type":130,"value":271},{"type":121,"tag":240,"props":596,"children":597},{"class":247},[598],{"type":130,"value":276},{"type":121,"tag":240,"props":600,"children":601},{"class":279},[602],{"type":130,"value":603},"/logos/nuxt.png",{"type":121,"tag":240,"props":605,"children":606},{"class":247},[607],{"type":130,"value":608},"\"\n",{"type":121,"tag":240,"props":610,"children":612},{"class":242,"line":611},3,[613,617,621,625,629,634],{"type":121,"tag":240,"props":614,"children":615},{"class":247},[616],{"type":130,"value":586},{"type":121,"tag":240,"props":618,"children":619},{"class":264},[620],{"type":130,"value":188},{"type":121,"tag":240,"props":622,"children":623},{"class":247},[624],{"type":130,"value":271},{"type":121,"tag":240,"props":626,"children":627},{"class":247},[628],{"type":130,"value":276},{"type":121,"tag":240,"props":630,"children":631},{"class":279},[632],{"type":130,"value":633},"sm:100vw md:50vw lg:400px",{"type":121,"tag":240,"props":635,"children":636},{"class":247},[637],{"type":130,"value":608},{"type":121,"tag":240,"props":639,"children":641},{"class":242,"line":640},4,[642],{"type":121,"tag":240,"props":643,"children":644},{"class":247},[645],{"type":130,"value":646},"  />",{"type":121,"tag":380,"props":648,"children":650},{"id":649},"densities",[651],{"type":121,"tag":126,"props":652,"children":653},{},[654],{"type":130,"value":649},{"type":121,"tag":122,"props":656,"children":657},{},[658],{"type":130,"value":659},"To generate special versions of images for screens with increased pixel density.",{"type":121,"tag":122,"props":661,"children":662},{},[663],{"type":121,"tag":554,"props":664,"children":665},{},[666],{"type":130,"value":558},{"type":121,"tag":230,"props":668,"children":670},{"className":232,"code":669,"language":234,"meta":115},"\u003CNuxtImg\n  src=\"/logos/nuxt.png\"\n  height=\"50\"\n  densities=\"x1 x2\"\n  />\n\u003C!--\n\u003Cimg\n  src=\"/_ipx/w_50/logos/nuxt.png\" \n  srcset=\"/_ipx/w_100/logos/nuxt.png x2\"\n  />\n-->\n",[671],{"type":121,"tag":126,"props":672,"children":673},{"__ignoreMap":115},[674,685,712,740,768,777,787,796,805,814,822],{"type":121,"tag":240,"props":675,"children":676},{"class":242,"line":243},[677,681],{"type":121,"tag":240,"props":678,"children":679},{"class":247},[680],{"type":130,"value":250},{"type":121,"tag":240,"props":682,"children":683},{"class":253},[684],{"type":130,"value":577},{"type":121,"tag":240,"props":686,"children":687},{"class":242,"line":580},[688,692,696,700,704,708],{"type":121,"tag":240,"props":689,"children":690},{"class":247},[691],{"type":130,"value":586},{"type":121,"tag":240,"props":693,"children":694},{"class":264},[695],{"type":130,"value":159},{"type":121,"tag":240,"props":697,"children":698},{"class":247},[699],{"type":130,"value":271},{"type":121,"tag":240,"props":701,"children":702},{"class":247},[703],{"type":130,"value":276},{"type":121,"tag":240,"props":705,"children":706},{"class":279},[707],{"type":130,"value":603},{"type":121,"tag":240,"props":709,"children":710},{"class":247},[711],{"type":130,"value":608},{"type":121,"tag":240,"props":713,"children":714},{"class":242,"line":611},[715,719,723,727,731,736],{"type":121,"tag":240,"props":716,"children":717},{"class":247},[718],{"type":130,"value":586},{"type":121,"tag":240,"props":720,"children":721},{"class":264},[722],{"type":130,"value":178},{"type":121,"tag":240,"props":724,"children":725},{"class":247},[726],{"type":130,"value":271},{"type":121,"tag":240,"props":728,"children":729},{"class":247},[730],{"type":130,"value":276},{"type":121,"tag":240,"props":732,"children":733},{"class":279},[734],{"type":130,"value":735},"50",{"type":121,"tag":240,"props":737,"children":738},{"class":247},[739],{"type":130,"value":608},{"type":121,"tag":240,"props":741,"children":742},{"class":242,"line":640},[743,747,751,755,759,764],{"type":121,"tag":240,"props":744,"children":745},{"class":247},[746],{"type":130,"value":586},{"type":121,"tag":240,"props":748,"children":749},{"class":264},[750],{"type":130,"value":649},{"type":121,"tag":240,"props":752,"children":753},{"class":247},[754],{"type":130,"value":271},{"type":121,"tag":240,"props":756,"children":757},{"class":247},[758],{"type":130,"value":276},{"type":121,"tag":240,"props":760,"children":761},{"class":279},[762],{"type":130,"value":763},"x1 x2",{"type":121,"tag":240,"props":765,"children":766},{"class":247},[767],{"type":130,"value":608},{"type":121,"tag":240,"props":769,"children":771},{"class":242,"line":770},5,[772],{"type":121,"tag":240,"props":773,"children":774},{"class":247},[775],{"type":130,"value":776},"  />\n",{"type":121,"tag":240,"props":778,"children":780},{"class":242,"line":779},6,[781],{"type":121,"tag":240,"props":782,"children":784},{"class":783},"ct-767688",[785],{"type":130,"value":786},"\u003C!--\n",{"type":121,"tag":240,"props":788,"children":790},{"class":242,"line":789},7,[791],{"type":121,"tag":240,"props":792,"children":793},{"class":783},[794],{"type":130,"value":795},"\u003Cimg\n",{"type":121,"tag":240,"props":797,"children":799},{"class":242,"line":798},8,[800],{"type":121,"tag":240,"props":801,"children":802},{"class":783},[803],{"type":130,"value":804},"  src=\"/_ipx/w_50/logos/nuxt.png\" \n",{"type":121,"tag":240,"props":806,"children":808},{"class":242,"line":807},9,[809],{"type":121,"tag":240,"props":810,"children":811},{"class":783},[812],{"type":130,"value":813},"  srcset=\"/_ipx/w_100/logos/nuxt.png x2\"\n",{"type":121,"tag":240,"props":815,"children":817},{"class":242,"line":816},10,[818],{"type":121,"tag":240,"props":819,"children":820},{"class":783},[821],{"type":130,"value":776},{"type":121,"tag":240,"props":823,"children":825},{"class":242,"line":824},11,[826],{"type":121,"tag":240,"props":827,"children":828},{"class":783},[829],{"type":130,"value":830},"-->",{"type":121,"tag":380,"props":832,"children":834},{"id":833},"placeholder",[835],{"type":121,"tag":126,"props":836,"children":837},{},[838],{"type":130,"value":833},{"type":121,"tag":122,"props":840,"children":841},{},[842],{"type":130,"value":843},"Display a placeholder image before the actual image is fully loaded.",{"type":121,"tag":122,"props":845,"children":846},{},[847],{"type":130,"value":848},"The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case.",{"type":121,"tag":230,"props":850,"children":852},{"className":232,"code":851,"language":234,"meta":115},"\u003C!-- Automatically generate a placeholder based on the original image -->\n\u003Cnuxt-img src=\"/nuxt.png\" placeholder />\n\n\u003C!-- Set a width, height for the automatically generated placeholder  -->\n\u003Cnuxt-img src=\"/nuxt.png\" :placeholder=\"[50, 25]\" />\n\n\u003C!-- Set a width, height, quality & blur for the automatically generated placeholder  -->\n\u003Cnuxt-img 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\u003Cnuxt-img src=\"/nuxt.png\" :placeholder=\"15\" />\n\n\u003C!-- Provide your own image -->\n\u003Cnuxt-img src=\"/nuxt.png\" placeholder=\"./placeholder.png\" />\n",[853],{"type":121,"tag":126,"props":854,"children":855},{"__ignoreMap":115},[856,864,913,919,927,992,998,1006,1070,1076,1084,1148,1155,1164],{"type":121,"tag":240,"props":857,"children":858},{"class":242,"line":243},[859],{"type":121,"tag":240,"props":860,"children":861},{"class":783},[862],{"type":130,"value":863},"\u003C!-- Automatically generate a placeholder based on the original image -->\n",{"type":121,"tag":240,"props":865,"children":866},{"class":242,"line":580},[867,871,876,880,884,888,892,896,900,904,908],{"type":121,"tag":240,"props":868,"children":869},{"class":247},[870],{"type":130,"value":250},{"type":121,"tag":240,"props":872,"children":873},{"class":253},[874],{"type":130,"value":875},"nuxt-img",{"type":121,"tag":240,"props":877,"children":878},{"class":247},[879],{"type":130,"value":261},{"type":121,"tag":240,"props":881,"children":882},{"class":264},[883],{"type":130,"value":159},{"type":121,"tag":240,"props":885,"children":886},{"class":247},[887],{"type":130,"value":271},{"type":121,"tag":240,"props":889,"children":890},{"class":247},[891],{"type":130,"value":276},{"type":121,"tag":240,"props":893,"children":894},{"class":279},[895],{"type":130,"value":452},{"type":121,"tag":240,"props":897,"children":898},{"class":247},[899],{"type":130,"value":276},{"type":121,"tag":240,"props":901,"children":902},{"class":247},[903],{"type":130,"value":261},{"type":121,"tag":240,"props":905,"children":906},{"class":264},[907],{"type":130,"value":833},{"type":121,"tag":240,"props":909,"children":910},{"class":247},[911],{"type":130,"value":912}," />\n",{"type":121,"tag":240,"props":914,"children":915},{"class":242,"line":611},[916],{"type":121,"tag":240,"props":917,"children":918},{},[],{"type":121,"tag":240,"props":920,"children":921},{"class":242,"line":640},[922],{"type":121,"tag":240,"props":923,"children":924},{"class":783},[925],{"type":130,"value":926},"\u003C!-- Set a width, height for the automatically generated placeholder  -->\n",{"type":121,"tag":240,"props":928,"children":929},{"class":242,"line":770},[930,934,938,942,946,950,954,958,962,966,971,975,979,984,988],{"type":121,"tag":240,"props":931,"children":932},{"class":247},[933],{"type":130,"value":250},{"type":121,"tag":240,"props":935,"children":936},{"class":253},[937],{"type":130,"value":875},{"type":121,"tag":240,"props":939,"children":940},{"class":247},[941],{"type":130,"value":261},{"type":121,"tag":240,"props":943,"children":944},{"class":264},[945],{"type":130,"value":159},{"type":121,"tag":240,"props":947,"children":948},{"class":247},[949],{"type":130,"value":271},{"type":121,"tag":240,"props":951,"children":952},{"class":247},[953],{"type":130,"value":276},{"type":121,"tag":240,"props":955,"children":956},{"class":279},[957],{"type":130,"value":452},{"type":121,"tag":240,"props":959,"children":960},{"class":247},[961],{"type":130,"value":276},{"type":121,"tag":240,"props":963,"children":964},{"class":247},[965],{"type":130,"value":261},{"type":121,"tag":240,"props":967,"children":968},{"class":264},[969],{"type":130,"value":970},":placeholder",{"type":121,"tag":240,"props":972,"children":973},{"class":247},[974],{"type":130,"value":271},{"type":121,"tag":240,"props":976,"children":977},{"class":247},[978],{"type":130,"value":276},{"type":121,"tag":240,"props":980,"children":981},{"class":279},[982],{"type":130,"value":983},"[50, 25]",{"type":121,"tag":240,"props":985,"children":986},{"class":247},[987],{"type":130,"value":276},{"type":121,"tag":240,"props":989,"children":990},{"class":247},[991],{"type":130,"value":912},{"type":121,"tag":240,"props":993,"children":994},{"class":242,"line":779},[995],{"type":121,"tag":240,"props":996,"children":997},{},[],{"type":121,"tag":240,"props":999,"children":1000},{"class":242,"line":789},[1001],{"type":121,"tag":240,"props":1002,"children":1003},{"class":783},[1004],{"type":130,"value":1005},"\u003C!-- Set a width, height, quality & blur for the automatically generated placeholder  -->\n",{"type":121,"tag":240,"props":1007,"children":1008},{"class":242,"line":798},[1009,1013,1017,1021,1025,1029,1033,1037,1041,1045,1049,1053,1057,1062,1066],{"type":121,"tag":240,"props":1010,"children":1011},{"class":247},[1012],{"type":130,"value":250},{"type":121,"tag":240,"props":1014,"children":1015},{"class":253},[1016],{"type":130,"value":875},{"type":121,"tag":240,"props":1018,"children":1019},{"class":247},[1020],{"type":130,"value":261},{"type":121,"tag":240,"props":1022,"children":1023},{"class":264},[1024],{"type":130,"value":159},{"type":121,"tag":240,"props":1026,"children":1027},{"class":247},[1028],{"type":130,"value":271},{"type":121,"tag":240,"props":1030,"children":1031},{"class":247},[1032],{"type":130,"value":276},{"type":121,"tag":240,"props":1034,"children":1035},{"class":279},[1036],{"type":130,"value":452},{"type":121,"tag":240,"props":1038,"children":1039},{"class":247},[1040],{"type":130,"value":276},{"type":121,"tag":240,"props":1042,"children":1043},{"class":247},[1044],{"type":130,"value":261},{"type":121,"tag":240,"props":1046,"children":1047},{"class":264},[1048],{"type":130,"value":970},{"type":121,"tag":240,"props":1050,"children":1051},{"class":247},[1052],{"type":130,"value":271},{"type":121,"tag":240,"props":1054,"children":1055},{"class":247},[1056],{"type":130,"value":276},{"type":121,"tag":240,"props":1058,"children":1059},{"class":279},[1060],{"type":130,"value":1061},"[50, 25, 75, 5]",{"type":121,"tag":240,"props":1063,"children":1064},{"class":247},[1065],{"type":130,"value":276},{"type":121,"tag":240,"props":1067,"children":1068},{"class":247},[1069],{"type":130,"value":912},{"type":121,"tag":240,"props":1071,"children":1072},{"class":242,"line":807},[1073],{"type":121,"tag":240,"props":1074,"children":1075},{},[],{"type":121,"tag":240,"props":1077,"children":1078},{"class":242,"line":816},[1079],{"type":121,"tag":240,"props":1080,"children":1081},{"class":783},[1082],{"type":130,"value":1083},"\u003C!-- Set the width & height of the automatically generated placeholder, image will be a square -->\n",{"type":121,"tag":240,"props":1085,"children":1086},{"class":242,"line":824},[1087,1091,1095,1099,1103,1107,1111,1115,1119,1123,1127,1131,1135,1140,1144],{"type":121,"tag":240,"props":1088,"children":1089},{"class":247},[1090],{"type":130,"value":250},{"type":121,"tag":240,"props":1092,"children":1093},{"class":253},[1094],{"type":130,"value":875},{"type":121,"tag":240,"props":1096,"children":1097},{"class":247},[1098],{"type":130,"value":261},{"type":121,"tag":240,"props":1100,"children":1101},{"class":264},[1102],{"type":130,"value":159},{"type":121,"tag":240,"props":1104,"children":1105},{"class":247},[1106],{"type":130,"value":271},{"type":121,"tag":240,"props":1108,"children":1109},{"class":247},[1110],{"type":130,"value":276},{"type":121,"tag":240,"props":1112,"children":1113},{"class":279},[1114],{"type":130,"value":452},{"type":121,"tag":240,"props":1116,"children":1117},{"class":247},[1118],{"type":130,"value":276},{"type":121,"tag":240,"props":1120,"children":1121},{"class":247},[1122],{"type":130,"value":261},{"type":121,"tag":240,"props":1124,"children":1125},{"class":264},[1126],{"type":130,"value":970},{"type":121,"tag":240,"props":1128,"children":1129},{"class":247},[1130],{"type":130,"value":271},{"type":121,"tag":240,"props":1132,"children":1133},{"class":247},[1134],{"type":130,"value":276},{"type":121,"tag":240,"props":1136,"children":1137},{"class":279},[1138],{"type":130,"value":1139},"15",{"type":121,"tag":240,"props":1141,"children":1142},{"class":247},[1143],{"type":130,"value":276},{"type":121,"tag":240,"props":1145,"children":1146},{"class":247},[1147],{"type":130,"value":912},{"type":121,"tag":240,"props":1149,"children":1151},{"class":242,"line":1150},12,[1152],{"type":121,"tag":240,"props":1153,"children":1154},{},[],{"type":121,"tag":240,"props":1156,"children":1158},{"class":242,"line":1157},13,[1159],{"type":121,"tag":240,"props":1160,"children":1161},{"class":783},[1162],{"type":130,"value":1163},"\u003C!-- Provide your own image -->\n",{"type":121,"tag":240,"props":1165,"children":1167},{"class":242,"line":1166},14,[1168,1172,1176,1180,1184,1188,1192,1196,1200,1204,1208,1212,1216,1221,1225],{"type":121,"tag":240,"props":1169,"children":1170},{"class":247},[1171],{"type":130,"value":250},{"type":121,"tag":240,"props":1173,"children":1174},{"class":253},[1175],{"type":130,"value":875},{"type":121,"tag":240,"props":1177,"children":1178},{"class":247},[1179],{"type":130,"value":261},{"type":121,"tag":240,"props":1181,"children":1182},{"class":264},[1183],{"type":130,"value":159},{"type":121,"tag":240,"props":1185,"children":1186},{"class":247},[1187],{"type":130,"value":271},{"type":121,"tag":240,"props":1189,"children":1190},{"class":247},[1191],{"type":130,"value":276},{"type":121,"tag":240,"props":1193,"children":1194},{"class":279},[1195],{"type":130,"value":452},{"type":121,"tag":240,"props":1197,"children":1198},{"class":247},[1199],{"type":130,"value":276},{"type":121,"tag":240,"props":1201,"children":1202},{"class":247},[1203],{"type":130,"value":261},{"type":121,"tag":240,"props":1205,"children":1206},{"class":264},[1207],{"type":130,"value":833},{"type":121,"tag":240,"props":1209,"children":1210},{"class":247},[1211],{"type":130,"value":271},{"type":121,"tag":240,"props":1213,"children":1214},{"class":247},[1215],{"type":130,"value":276},{"type":121,"tag":240,"props":1217,"children":1218},{"class":279},[1219],{"type":130,"value":1220},"./placeholder.png",{"type":121,"tag":240,"props":1222,"children":1223},{"class":247},[1224],{"type":130,"value":276},{"type":121,"tag":240,"props":1226,"children":1227},{"class":247},[1228],{"type":130,"value":291},{"type":121,"tag":122,"props":1230,"children":1231},{},[1232,1234,1241],{"type":130,"value":1233},"You can also leverage ",{"type":121,"tag":353,"props":1235,"children":1236},{"href":29},[1237],{"type":121,"tag":126,"props":1238,"children":1239},{},[1240],{"type":130,"value":28},{"type":130,"value":1242}," 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:",{"type":121,"tag":230,"props":1244,"children":1248},{"className":1245,"code":1246,"language":1247,"meta":115},"language-vue material-theme_material-theme-palenight_material-theme-lighter","\u003Cscript setup>\nconst img = useImage()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CNuxtImg :placeholder=\"img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })\" src=\"/nuxt.svg`\" />\n\u003C/template>\n","vue",[1249],{"type":121,"tag":126,"props":1250,"children":1251},{"__ignoreMap":115},[1252,1279,1311,1327,1333,1349,1418],{"type":121,"tag":240,"props":1253,"children":1254},{"class":242,"line":243},[1255,1259,1264,1269,1274],{"type":121,"tag":240,"props":1256,"children":1257},{"class":247},[1258],{"type":130,"value":250},{"type":121,"tag":240,"props":1260,"children":1261},{"class":253},[1262],{"type":130,"value":1263},"script",{"type":121,"tag":240,"props":1265,"children":1267},{"class":1266},"ct-521921",[1268],{"type":130,"value":261},{"type":121,"tag":240,"props":1270,"children":1271},{"class":264},[1272],{"type":130,"value":1273},"setup",{"type":121,"tag":240,"props":1275,"children":1276},{"class":247},[1277],{"type":130,"value":1278},">\n",{"type":121,"tag":240,"props":1280,"children":1281},{"class":242,"line":580},[1282,1287,1292,1296,1300,1306],{"type":121,"tag":240,"props":1283,"children":1284},{"class":264},[1285],{"type":130,"value":1286},"const",{"type":121,"tag":240,"props":1288,"children":1289},{"class":1266},[1290],{"type":130,"value":1291}," img ",{"type":121,"tag":240,"props":1293,"children":1294},{"class":247},[1295],{"type":130,"value":271},{"type":121,"tag":240,"props":1297,"children":1298},{"class":1266},[1299],{"type":130,"value":261},{"type":121,"tag":240,"props":1301,"children":1303},{"class":1302},"ct-021512",[1304],{"type":130,"value":1305},"useImage",{"type":121,"tag":240,"props":1307,"children":1308},{"class":1266},[1309],{"type":130,"value":1310},"()\n",{"type":121,"tag":240,"props":1312,"children":1313},{"class":242,"line":611},[1314,1319,1323],{"type":121,"tag":240,"props":1315,"children":1316},{"class":247},[1317],{"type":130,"value":1318},"\u003C/",{"type":121,"tag":240,"props":1320,"children":1321},{"class":253},[1322],{"type":130,"value":1263},{"type":121,"tag":240,"props":1324,"children":1325},{"class":247},[1326],{"type":130,"value":1278},{"type":121,"tag":240,"props":1328,"children":1329},{"class":242,"line":640},[1330],{"type":121,"tag":240,"props":1331,"children":1332},{},[],{"type":121,"tag":240,"props":1334,"children":1335},{"class":242,"line":770},[1336,1340,1345],{"type":121,"tag":240,"props":1337,"children":1338},{"class":247},[1339],{"type":130,"value":250},{"type":121,"tag":240,"props":1341,"children":1342},{"class":253},[1343],{"type":130,"value":1344},"template",{"type":121,"tag":240,"props":1346,"children":1347},{"class":247},[1348],{"type":130,"value":1278},{"type":121,"tag":240,"props":1350,"children":1351},{"class":242,"line":779},[1352,1356,1360,1364,1368,1372,1376,1380,1385,1389,1393,1397,1401,1405,1410,1414],{"type":121,"tag":240,"props":1353,"children":1354},{"class":1266},[1355],{"type":130,"value":586},{"type":121,"tag":240,"props":1357,"children":1358},{"class":247},[1359],{"type":130,"value":250},{"type":121,"tag":240,"props":1361,"children":1362},{"class":253},[1363],{"type":130,"value":256},{"type":121,"tag":240,"props":1365,"children":1366},{"class":247},[1367],{"type":130,"value":261},{"type":121,"tag":240,"props":1369,"children":1370},{"class":264},[1371],{"type":130,"value":970},{"type":121,"tag":240,"props":1373,"children":1374},{"class":247},[1375],{"type":130,"value":271},{"type":121,"tag":240,"props":1377,"children":1378},{"class":247},[1379],{"type":130,"value":276},{"type":121,"tag":240,"props":1381,"children":1382},{"class":279},[1383],{"type":130,"value":1384},"img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })",{"type":121,"tag":240,"props":1386,"children":1387},{"class":247},[1388],{"type":130,"value":276},{"type":121,"tag":240,"props":1390,"children":1391},{"class":247},[1392],{"type":130,"value":261},{"type":121,"tag":240,"props":1394,"children":1395},{"class":264},[1396],{"type":130,"value":159},{"type":121,"tag":240,"props":1398,"children":1399},{"class":247},[1400],{"type":130,"value":271},{"type":121,"tag":240,"props":1402,"children":1403},{"class":247},[1404],{"type":130,"value":276},{"type":121,"tag":240,"props":1406,"children":1407},{"class":279},[1408],{"type":130,"value":1409},"/nuxt.svg`",{"type":121,"tag":240,"props":1411,"children":1412},{"class":247},[1413],{"type":130,"value":276},{"type":121,"tag":240,"props":1415,"children":1416},{"class":247},[1417],{"type":130,"value":912},{"type":121,"tag":240,"props":1419,"children":1420},{"class":242,"line":789},[1421,1425,1429],{"type":121,"tag":240,"props":1422,"children":1423},{"class":247},[1424],{"type":130,"value":1318},{"type":121,"tag":240,"props":1426,"children":1427},{"class":253},[1428],{"type":130,"value":1344},{"type":121,"tag":240,"props":1430,"children":1431},{"class":247},[1432],{"type":130,"value":1433},">",{"type":121,"tag":380,"props":1435,"children":1437},{"id":1436},"provider",[1438],{"type":121,"tag":126,"props":1439,"children":1440},{},[1441],{"type":130,"value":1436},{"type":121,"tag":122,"props":1443,"children":1444},{},[1445,1447,1453,1455],{"type":130,"value":1446},"Use other provider instead of default ",{"type":121,"tag":353,"props":1448,"children":1450},{"href":1449},"/get-started/configuration#provider",[1451],{"type":130,"value":1452},"provider option",{"type":130,"value":1454}," specified in ",{"type":121,"tag":126,"props":1456,"children":1457},{},[1458],{"type":130,"value":1459},"nuxt.config",{"type":121,"tag":122,"props":1461,"children":1462},{},[1463],{"type":121,"tag":554,"props":1464,"children":1465},{},[1466],{"type":130,"value":558},{"type":121,"tag":1468,"props":1469,"children":1470},"code-group",{},[1471,1644],{"type":121,"tag":230,"props":1472,"children":1475},{"className":232,"code":1473,"filename":1474,"language":234,"meta":115},"\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",[1476],{"type":121,"tag":126,"props":1477,"children":1478},{"__ignoreMap":115},[1479,1494,1509,1538,1566,1594,1622,1629],{"type":121,"tag":240,"props":1480,"children":1481},{"class":242,"line":243},[1482,1486,1490],{"type":121,"tag":240,"props":1483,"children":1484},{"class":247},[1485],{"type":130,"value":250},{"type":121,"tag":240,"props":1487,"children":1488},{"class":253},[1489],{"type":130,"value":1344},{"type":121,"tag":240,"props":1491,"children":1492},{"class":247},[1493],{"type":130,"value":1278},{"type":121,"tag":240,"props":1495,"children":1496},{"class":242,"line":580},[1497,1501,1505],{"type":121,"tag":240,"props":1498,"children":1499},{"class":1266},[1500],{"type":130,"value":586},{"type":121,"tag":240,"props":1502,"children":1503},{"class":247},[1504],{"type":130,"value":250},{"type":121,"tag":240,"props":1506,"children":1507},{"class":253},[1508],{"type":130,"value":577},{"type":121,"tag":240,"props":1510,"children":1511},{"class":242,"line":611},[1512,1517,1521,1525,1529,1534],{"type":121,"tag":240,"props":1513,"children":1514},{"class":247},[1515],{"type":130,"value":1516},"    ",{"type":121,"tag":240,"props":1518,"children":1519},{"class":264},[1520],{"type":130,"value":1436},{"type":121,"tag":240,"props":1522,"children":1523},{"class":247},[1524],{"type":130,"value":271},{"type":121,"tag":240,"props":1526,"children":1527},{"class":247},[1528],{"type":130,"value":276},{"type":121,"tag":240,"props":1530,"children":1531},{"class":279},[1532],{"type":130,"value":1533},"cloudinary",{"type":121,"tag":240,"props":1535,"children":1536},{"class":247},[1537],{"type":130,"value":608},{"type":121,"tag":240,"props":1539,"children":1540},{"class":242,"line":640},[1541,1545,1549,1553,1557,1562],{"type":121,"tag":240,"props":1542,"children":1543},{"class":247},[1544],{"type":130,"value":1516},{"type":121,"tag":240,"props":1546,"children":1547},{"class":264},[1548],{"type":130,"value":159},{"type":121,"tag":240,"props":1550,"children":1551},{"class":247},[1552],{"type":130,"value":271},{"type":121,"tag":240,"props":1554,"children":1555},{"class":247},[1556],{"type":130,"value":276},{"type":121,"tag":240,"props":1558,"children":1559},{"class":279},[1560],{"type":130,"value":1561},"/remote/nuxt-org/blog/going-full-static/main.png",{"type":121,"tag":240,"props":1563,"children":1564},{"class":247},[1565],{"type":130,"value":608},{"type":121,"tag":240,"props":1567,"children":1568},{"class":242,"line":770},[1569,1573,1577,1581,1585,1590],{"type":121,"tag":240,"props":1570,"children":1571},{"class":247},[1572],{"type":130,"value":1516},{"type":121,"tag":240,"props":1574,"children":1575},{"class":264},[1576],{"type":130,"value":171},{"type":121,"tag":240,"props":1578,"children":1579},{"class":247},[1580],{"type":130,"value":271},{"type":121,"tag":240,"props":1582,"children":1583},{"class":247},[1584],{"type":130,"value":276},{"type":121,"tag":240,"props":1586,"children":1587},{"class":279},[1588],{"type":130,"value":1589},"300",{"type":121,"tag":240,"props":1591,"children":1592},{"class":247},[1593],{"type":130,"value":608},{"type":121,"tag":240,"props":1595,"children":1596},{"class":242,"line":779},[1597,1601,1605,1609,1613,1618],{"type":121,"tag":240,"props":1598,"children":1599},{"class":247},[1600],{"type":130,"value":1516},{"type":121,"tag":240,"props":1602,"children":1603},{"class":264},[1604],{"type":130,"value":178},{"type":121,"tag":240,"props":1606,"children":1607},{"class":247},[1608],{"type":130,"value":271},{"type":121,"tag":240,"props":1610,"children":1611},{"class":247},[1612],{"type":130,"value":276},{"type":121,"tag":240,"props":1614,"children":1615},{"class":279},[1616],{"type":130,"value":1617},"169",{"type":121,"tag":240,"props":1619,"children":1620},{"class":247},[1621],{"type":130,"value":608},{"type":121,"tag":240,"props":1623,"children":1624},{"class":242,"line":789},[1625],{"type":121,"tag":240,"props":1626,"children":1627},{"class":247},[1628],{"type":130,"value":776},{"type":121,"tag":240,"props":1630,"children":1631},{"class":242,"line":798},[1632,1636,1640],{"type":121,"tag":240,"props":1633,"children":1634},{"class":247},[1635],{"type":130,"value":1318},{"type":121,"tag":240,"props":1637,"children":1638},{"class":253},[1639],{"type":130,"value":1344},{"type":121,"tag":240,"props":1641,"children":1642},{"class":247},[1643],{"type":130,"value":1433},{"type":121,"tag":230,"props":1645,"children":1650},{"className":1646,"code":1647,"filename":1648,"language":1649,"meta":115},"language-ts material-theme_material-theme-palenight_material-theme-lighter","export default defineNuxtConfig({\n  image: {\n    cloudinary: {\n      baseURL: 'https://res.cloudinary.com/nuxt/image/upload/',\n    },\n  },\n})\n","nuxt.config.ts","ts",[1651],{"type":121,"tag":126,"props":1652,"children":1653},{"__ignoreMap":115},[1654,1691,1716,1739,1779,1791,1802],{"type":121,"tag":240,"props":1655,"children":1656},{"class":242,"line":243},[1657,1663,1667,1672,1676,1681,1686],{"type":121,"tag":240,"props":1658,"children":1660},{"class":1659},"ct-398028",[1661],{"type":130,"value":1662},"export",{"type":121,"tag":240,"props":1664,"children":1665},{"class":1266},[1666],{"type":130,"value":261},{"type":121,"tag":240,"props":1668,"children":1669},{"class":1659},[1670],{"type":130,"value":1671},"default",{"type":121,"tag":240,"props":1673,"children":1674},{"class":1266},[1675],{"type":130,"value":261},{"type":121,"tag":240,"props":1677,"children":1678},{"class":1302},[1679],{"type":130,"value":1680},"defineNuxtConfig",{"type":121,"tag":240,"props":1682,"children":1683},{"class":1266},[1684],{"type":130,"value":1685},"(",{"type":121,"tag":240,"props":1687,"children":1688},{"class":247},[1689],{"type":130,"value":1690},"{\n",{"type":121,"tag":240,"props":1692,"children":1693},{"class":242,"line":580},[1694,1698,1703,1708,1712],{"type":121,"tag":240,"props":1695,"children":1696},{"class":1266},[1697],{"type":130,"value":586},{"type":121,"tag":240,"props":1699,"children":1700},{"class":253},[1701],{"type":130,"value":1702},"image",{"type":121,"tag":240,"props":1704,"children":1705},{"class":247},[1706],{"type":130,"value":1707},":",{"type":121,"tag":240,"props":1709,"children":1710},{"class":1266},[1711],{"type":130,"value":261},{"type":121,"tag":240,"props":1713,"children":1714},{"class":247},[1715],{"type":130,"value":1690},{"type":121,"tag":240,"props":1717,"children":1718},{"class":242,"line":611},[1719,1723,1727,1731,1735],{"type":121,"tag":240,"props":1720,"children":1721},{"class":1266},[1722],{"type":130,"value":1516},{"type":121,"tag":240,"props":1724,"children":1725},{"class":253},[1726],{"type":130,"value":1533},{"type":121,"tag":240,"props":1728,"children":1729},{"class":247},[1730],{"type":130,"value":1707},{"type":121,"tag":240,"props":1732,"children":1733},{"class":1266},[1734],{"type":130,"value":261},{"type":121,"tag":240,"props":1736,"children":1737},{"class":247},[1738],{"type":130,"value":1690},{"type":121,"tag":240,"props":1740,"children":1741},{"class":242,"line":640},[1742,1747,1752,1756,1760,1765,1770,1774],{"type":121,"tag":240,"props":1743,"children":1744},{"class":1266},[1745],{"type":130,"value":1746},"      ",{"type":121,"tag":240,"props":1748,"children":1749},{"class":253},[1750],{"type":130,"value":1751},"baseURL",{"type":121,"tag":240,"props":1753,"children":1754},{"class":247},[1755],{"type":130,"value":1707},{"type":121,"tag":240,"props":1757,"children":1758},{"class":1266},[1759],{"type":130,"value":261},{"type":121,"tag":240,"props":1761,"children":1762},{"class":247},[1763],{"type":130,"value":1764},"'",{"type":121,"tag":240,"props":1766,"children":1767},{"class":279},[1768],{"type":130,"value":1769},"https://res.cloudinary.com/nuxt/image/upload/",{"type":121,"tag":240,"props":1771,"children":1772},{"class":247},[1773],{"type":130,"value":1764},{"type":121,"tag":240,"props":1775,"children":1776},{"class":247},[1777],{"type":130,"value":1778},",\n",{"type":121,"tag":240,"props":1780,"children":1781},{"class":242,"line":770},[1782,1786],{"type":121,"tag":240,"props":1783,"children":1784},{"class":1266},[1785],{"type":130,"value":1516},{"type":121,"tag":240,"props":1787,"children":1788},{"class":247},[1789],{"type":130,"value":1790},"},\n",{"type":121,"tag":240,"props":1792,"children":1793},{"class":242,"line":779},[1794,1798],{"type":121,"tag":240,"props":1795,"children":1796},{"class":1266},[1797],{"type":130,"value":586},{"type":121,"tag":240,"props":1799,"children":1800},{"class":247},[1801],{"type":130,"value":1790},{"type":121,"tag":240,"props":1803,"children":1804},{"class":242,"line":789},[1805,1810],{"type":121,"tag":240,"props":1806,"children":1807},{"class":247},[1808],{"type":130,"value":1809},"}",{"type":121,"tag":240,"props":1811,"children":1812},{"class":1266},[1813],{"type":130,"value":524},{"type":121,"tag":380,"props":1815,"children":1817},{"id":1816},"preset",[1818],{"type":121,"tag":126,"props":1819,"children":1820},{},[1821],{"type":130,"value":1816},{"type":121,"tag":122,"props":1823,"children":1824},{},[1825],{"type":130,"value":1826},"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects.",{"type":121,"tag":344,"props":1828,"children":1829},{},[1830],{"type":121,"tag":122,"props":1831,"children":1832},{},[1833,1835,1841,1843],{"type":130,"value":1834},"We can define presets using ",{"type":121,"tag":353,"props":1836,"children":1838},{"href":1837},"/get-started/configuration#presets",[1839],{"type":130,"value":1840},"presets options",{"type":130,"value":1842}," in ",{"type":121,"tag":126,"props":1844,"children":1845},{},[1846],{"type":130,"value":1459},{"type":121,"tag":1468,"props":1848,"children":1849},{},[1850,1955],{"type":121,"tag":230,"props":1851,"children":1853},{"className":232,"code":1852,"filename":1474,"language":234,"meta":115},"\u003Ctemplate>\n  \u003CNuxtImg preset=\"cover\" src=\"/nuxt-icon.png\" />\n\u003C/template>\n",[1854],{"type":121,"tag":126,"props":1855,"children":1856},{"__ignoreMap":115},[1857,1872,1940],{"type":121,"tag":240,"props":1858,"children":1859},{"class":242,"line":243},[1860,1864,1868],{"type":121,"tag":240,"props":1861,"children":1862},{"class":247},[1863],{"type":130,"value":250},{"type":121,"tag":240,"props":1865,"children":1866},{"class":253},[1867],{"type":130,"value":1344},{"type":121,"tag":240,"props":1869,"children":1870},{"class":247},[1871],{"type":130,"value":1278},{"type":121,"tag":240,"props":1873,"children":1874},{"class":242,"line":580},[1875,1879,1883,1887,1891,1895,1899,1903,1908,1912,1916,1920,1924,1928,1932,1936],{"type":121,"tag":240,"props":1876,"children":1877},{"class":1266},[1878],{"type":130,"value":586},{"type":121,"tag":240,"props":1880,"children":1881},{"class":247},[1882],{"type":130,"value":250},{"type":121,"tag":240,"props":1884,"children":1885},{"class":253},[1886],{"type":130,"value":256},{"type":121,"tag":240,"props":1888,"children":1889},{"class":247},[1890],{"type":130,"value":261},{"type":121,"tag":240,"props":1892,"children":1893},{"class":264},[1894],{"type":130,"value":1816},{"type":121,"tag":240,"props":1896,"children":1897},{"class":247},[1898],{"type":130,"value":271},{"type":121,"tag":240,"props":1900,"children":1901},{"class":247},[1902],{"type":130,"value":276},{"type":121,"tag":240,"props":1904,"children":1905},{"class":279},[1906],{"type":130,"value":1907},"cover",{"type":121,"tag":240,"props":1909,"children":1910},{"class":247},[1911],{"type":130,"value":276},{"type":121,"tag":240,"props":1913,"children":1914},{"class":247},[1915],{"type":130,"value":261},{"type":121,"tag":240,"props":1917,"children":1918},{"class":264},[1919],{"type":130,"value":159},{"type":121,"tag":240,"props":1921,"children":1922},{"class":247},[1923],{"type":130,"value":271},{"type":121,"tag":240,"props":1925,"children":1926},{"class":247},[1927],{"type":130,"value":276},{"type":121,"tag":240,"props":1929,"children":1930},{"class":279},[1931],{"type":130,"value":282},{"type":121,"tag":240,"props":1933,"children":1934},{"class":247},[1935],{"type":130,"value":276},{"type":121,"tag":240,"props":1937,"children":1938},{"class":247},[1939],{"type":130,"value":912},{"type":121,"tag":240,"props":1941,"children":1942},{"class":242,"line":611},[1943,1947,1951],{"type":121,"tag":240,"props":1944,"children":1945},{"class":247},[1946],{"type":130,"value":1318},{"type":121,"tag":240,"props":1948,"children":1949},{"class":253},[1950],{"type":130,"value":1344},{"type":121,"tag":240,"props":1952,"children":1953},{"class":247},[1954],{"type":130,"value":1433},{"type":121,"tag":230,"props":1956,"children":1958},{"className":1646,"code":1957,"filename":1648,"language":1649,"meta":115},"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",[1959],{"type":121,"tag":126,"props":1960,"children":1961},{"__ignoreMap":115},[1962,1993,2016,2040,2063,2088,2125,2162,2190,2217,2228,2239,2250,2261],{"type":121,"tag":240,"props":1963,"children":1964},{"class":242,"line":243},[1965,1969,1973,1977,1981,1985,1989],{"type":121,"tag":240,"props":1966,"children":1967},{"class":1659},[1968],{"type":130,"value":1662},{"type":121,"tag":240,"props":1970,"children":1971},{"class":1266},[1972],{"type":130,"value":261},{"type":121,"tag":240,"props":1974,"children":1975},{"class":1659},[1976],{"type":130,"value":1671},{"type":121,"tag":240,"props":1978,"children":1979},{"class":1266},[1980],{"type":130,"value":261},{"type":121,"tag":240,"props":1982,"children":1983},{"class":1302},[1984],{"type":130,"value":1680},{"type":121,"tag":240,"props":1986,"children":1987},{"class":1266},[1988],{"type":130,"value":1685},{"type":121,"tag":240,"props":1990,"children":1991},{"class":247},[1992],{"type":130,"value":1690},{"type":121,"tag":240,"props":1994,"children":1995},{"class":242,"line":580},[1996,2000,2004,2008,2012],{"type":121,"tag":240,"props":1997,"children":1998},{"class":1266},[1999],{"type":130,"value":586},{"type":121,"tag":240,"props":2001,"children":2002},{"class":253},[2003],{"type":130,"value":1702},{"type":121,"tag":240,"props":2005,"children":2006},{"class":247},[2007],{"type":130,"value":1707},{"type":121,"tag":240,"props":2009,"children":2010},{"class":1266},[2011],{"type":130,"value":261},{"type":121,"tag":240,"props":2013,"children":2014},{"class":247},[2015],{"type":130,"value":1690},{"type":121,"tag":240,"props":2017,"children":2018},{"class":242,"line":611},[2019,2023,2028,2032,2036],{"type":121,"tag":240,"props":2020,"children":2021},{"class":1266},[2022],{"type":130,"value":1516},{"type":121,"tag":240,"props":2024,"children":2025},{"class":253},[2026],{"type":130,"value":2027},"presets",{"type":121,"tag":240,"props":2029,"children":2030},{"class":247},[2031],{"type":130,"value":1707},{"type":121,"tag":240,"props":2033,"children":2034},{"class":1266},[2035],{"type":130,"value":261},{"type":121,"tag":240,"props":2037,"children":2038},{"class":247},[2039],{"type":130,"value":1690},{"type":121,"tag":240,"props":2041,"children":2042},{"class":242,"line":640},[2043,2047,2051,2055,2059],{"type":121,"tag":240,"props":2044,"children":2045},{"class":1266},[2046],{"type":130,"value":1746},{"type":121,"tag":240,"props":2048,"children":2049},{"class":253},[2050],{"type":130,"value":1907},{"type":121,"tag":240,"props":2052,"children":2053},{"class":247},[2054],{"type":130,"value":1707},{"type":121,"tag":240,"props":2056,"children":2057},{"class":1266},[2058],{"type":130,"value":261},{"type":121,"tag":240,"props":2060,"children":2061},{"class":247},[2062],{"type":130,"value":1690},{"type":121,"tag":240,"props":2064,"children":2065},{"class":242,"line":770},[2066,2071,2076,2080,2084],{"type":121,"tag":240,"props":2067,"children":2068},{"class":1266},[2069],{"type":130,"value":2070},"        ",{"type":121,"tag":240,"props":2072,"children":2073},{"class":253},[2074],{"type":130,"value":2075},"modifiers",{"type":121,"tag":240,"props":2077,"children":2078},{"class":247},[2079],{"type":130,"value":1707},{"type":121,"tag":240,"props":2081,"children":2082},{"class":1266},[2083],{"type":130,"value":261},{"type":121,"tag":240,"props":2085,"children":2086},{"class":247},[2087],{"type":130,"value":1690},{"type":121,"tag":240,"props":2089,"children":2090},{"class":242,"line":779},[2091,2096,2101,2105,2109,2113,2117,2121],{"type":121,"tag":240,"props":2092,"children":2093},{"class":1266},[2094],{"type":130,"value":2095},"          ",{"type":121,"tag":240,"props":2097,"children":2098},{"class":253},[2099],{"type":130,"value":2100},"fit",{"type":121,"tag":240,"props":2102,"children":2103},{"class":247},[2104],{"type":130,"value":1707},{"type":121,"tag":240,"props":2106,"children":2107},{"class":1266},[2108],{"type":130,"value":261},{"type":121,"tag":240,"props":2110,"children":2111},{"class":247},[2112],{"type":130,"value":1764},{"type":121,"tag":240,"props":2114,"children":2115},{"class":279},[2116],{"type":130,"value":1907},{"type":121,"tag":240,"props":2118,"children":2119},{"class":247},[2120],{"type":130,"value":1764},{"type":121,"tag":240,"props":2122,"children":2123},{"class":247},[2124],{"type":130,"value":1778},{"type":121,"tag":240,"props":2126,"children":2127},{"class":242,"line":789},[2128,2132,2137,2141,2145,2149,2154,2158],{"type":121,"tag":240,"props":2129,"children":2130},{"class":1266},[2131],{"type":130,"value":2095},{"type":121,"tag":240,"props":2133,"children":2134},{"class":253},[2135],{"type":130,"value":2136},"format",{"type":121,"tag":240,"props":2138,"children":2139},{"class":247},[2140],{"type":130,"value":1707},{"type":121,"tag":240,"props":2142,"children":2143},{"class":1266},[2144],{"type":130,"value":261},{"type":121,"tag":240,"props":2146,"children":2147},{"class":247},[2148],{"type":130,"value":1764},{"type":121,"tag":240,"props":2150,"children":2151},{"class":279},[2152],{"type":130,"value":2153},"jpg",{"type":121,"tag":240,"props":2155,"children":2156},{"class":247},[2157],{"type":130,"value":1764},{"type":121,"tag":240,"props":2159,"children":2160},{"class":247},[2161],{"type":130,"value":1778},{"type":121,"tag":240,"props":2163,"children":2164},{"class":242,"line":798},[2165,2169,2173,2177,2181,2186],{"type":121,"tag":240,"props":2166,"children":2167},{"class":1266},[2168],{"type":130,"value":2095},{"type":121,"tag":240,"props":2170,"children":2171},{"class":253},[2172],{"type":130,"value":171},{"type":121,"tag":240,"props":2174,"children":2175},{"class":247},[2176],{"type":130,"value":1707},{"type":121,"tag":240,"props":2178,"children":2179},{"class":1266},[2180],{"type":130,"value":261},{"type":121,"tag":240,"props":2182,"children":2184},{"class":2183},"ct-053683",[2185],{"type":130,"value":1589},{"type":121,"tag":240,"props":2187,"children":2188},{"class":247},[2189],{"type":130,"value":1778},{"type":121,"tag":240,"props":2191,"children":2192},{"class":242,"line":807},[2193,2197,2201,2205,2209,2213],{"type":121,"tag":240,"props":2194,"children":2195},{"class":1266},[2196],{"type":130,"value":2095},{"type":121,"tag":240,"props":2198,"children":2199},{"class":253},[2200],{"type":130,"value":178},{"type":121,"tag":240,"props":2202,"children":2203},{"class":247},[2204],{"type":130,"value":1707},{"type":121,"tag":240,"props":2206,"children":2207},{"class":1266},[2208],{"type":130,"value":261},{"type":121,"tag":240,"props":2210,"children":2211},{"class":2183},[2212],{"type":130,"value":1589},{"type":121,"tag":240,"props":2214,"children":2215},{"class":247},[2216],{"type":130,"value":1778},{"type":121,"tag":240,"props":2218,"children":2219},{"class":242,"line":816},[2220,2224],{"type":121,"tag":240,"props":2221,"children":2222},{"class":1266},[2223],{"type":130,"value":2070},{"type":121,"tag":240,"props":2225,"children":2226},{"class":247},[2227],{"type":130,"value":1790},{"type":121,"tag":240,"props":2229,"children":2230},{"class":242,"line":824},[2231,2235],{"type":121,"tag":240,"props":2232,"children":2233},{"class":1266},[2234],{"type":130,"value":1746},{"type":121,"tag":240,"props":2236,"children":2237},{"class":247},[2238],{"type":130,"value":1790},{"type":121,"tag":240,"props":2240,"children":2241},{"class":242,"line":1150},[2242,2246],{"type":121,"tag":240,"props":2243,"children":2244},{"class":1266},[2245],{"type":130,"value":1516},{"type":121,"tag":240,"props":2247,"children":2248},{"class":247},[2249],{"type":130,"value":1790},{"type":121,"tag":240,"props":2251,"children":2252},{"class":242,"line":1157},[2253,2257],{"type":121,"tag":240,"props":2254,"children":2255},{"class":1266},[2256],{"type":130,"value":586},{"type":121,"tag":240,"props":2258,"children":2259},{"class":247},[2260],{"type":130,"value":1790},{"type":121,"tag":240,"props":2262,"children":2263},{"class":242,"line":1166},[2264,2268],{"type":121,"tag":240,"props":2265,"children":2266},{"class":247},[2267],{"type":130,"value":1809},{"type":121,"tag":240,"props":2269,"children":2270},{"class":1266},[2271],{"type":130,"value":524},{"type":121,"tag":380,"props":2273,"children":2274},{"id":2136},[2275],{"type":121,"tag":126,"props":2276,"children":2277},{},[2278],{"type":130,"value":2136},{"type":121,"tag":122,"props":2280,"children":2281},{},[2282],{"type":130,"value":2283},"In case you want to serve images in a specific format, use this prop.",{"type":121,"tag":230,"props":2285,"children":2287},{"className":232,"code":2286,"language":234,"meta":115},"\u003CNuxtImg format=\"webp\" src=\"/nuxt-icon.png\" ... />\n",[2288],{"type":121,"tag":126,"props":2289,"children":2290},{"__ignoreMap":115},[2291],{"type":121,"tag":240,"props":2292,"children":2293},{"class":242,"line":243},[2294,2298,2302,2306,2310,2314,2318,2323,2327,2331,2335,2339,2343,2347,2351,2355,2360],{"type":121,"tag":240,"props":2295,"children":2296},{"class":247},[2297],{"type":130,"value":250},{"type":121,"tag":240,"props":2299,"children":2300},{"class":253},[2301],{"type":130,"value":256},{"type":121,"tag":240,"props":2303,"children":2304},{"class":247},[2305],{"type":130,"value":261},{"type":121,"tag":240,"props":2307,"children":2308},{"class":264},[2309],{"type":130,"value":2136},{"type":121,"tag":240,"props":2311,"children":2312},{"class":247},[2313],{"type":130,"value":271},{"type":121,"tag":240,"props":2315,"children":2316},{"class":247},[2317],{"type":130,"value":276},{"type":121,"tag":240,"props":2319,"children":2320},{"class":279},[2321],{"type":130,"value":2322},"webp",{"type":121,"tag":240,"props":2324,"children":2325},{"class":247},[2326],{"type":130,"value":276},{"type":121,"tag":240,"props":2328,"children":2329},{"class":247},[2330],{"type":130,"value":261},{"type":121,"tag":240,"props":2332,"children":2333},{"class":264},[2334],{"type":130,"value":159},{"type":121,"tag":240,"props":2336,"children":2337},{"class":247},[2338],{"type":130,"value":271},{"type":121,"tag":240,"props":2340,"children":2341},{"class":247},[2342],{"type":130,"value":276},{"type":121,"tag":240,"props":2344,"children":2345},{"class":279},[2346],{"type":130,"value":282},{"type":121,"tag":240,"props":2348,"children":2349},{"class":247},[2350],{"type":130,"value":276},{"type":121,"tag":240,"props":2352,"children":2353},{"class":247},[2354],{"type":130,"value":261},{"type":121,"tag":240,"props":2356,"children":2357},{"class":264},[2358],{"type":130,"value":2359},"...",{"type":121,"tag":240,"props":2361,"children":2362},{"class":247},[2363],{"type":130,"value":291},{"type":121,"tag":122,"props":2365,"children":2366},{},[2367,2369,2373,2375,2380,2381,2386,2387,2391,2392,2397,2398,2403,2404,2409],{"type":130,"value":2368},"Available formats are ",{"type":121,"tag":126,"props":2370,"children":2371},{},[2372],{"type":130,"value":2322},{"type":130,"value":2374},", ",{"type":121,"tag":126,"props":2376,"children":2377},{},[2378],{"type":130,"value":2379},"avif",{"type":130,"value":2374},{"type":121,"tag":126,"props":2382,"children":2383},{},[2384],{"type":130,"value":2385},"jpeg",{"type":130,"value":2374},{"type":121,"tag":126,"props":2388,"children":2389},{},[2390],{"type":130,"value":2153},{"type":130,"value":2374},{"type":121,"tag":126,"props":2393,"children":2394},{},[2395],{"type":130,"value":2396},"png",{"type":130,"value":2374},{"type":121,"tag":126,"props":2399,"children":2400},{},[2401],{"type":130,"value":2402},"gif",{"type":130,"value":173},{"type":121,"tag":126,"props":2405,"children":2406},{},[2407],{"type":130,"value":2408},"svg",{"type":130,"value":2410},". If the format is not specified, it will respect the default image format.",{"type":121,"tag":380,"props":2412,"children":2414},{"id":2413},"quality",[2415],{"type":121,"tag":126,"props":2416,"children":2417},{},[2418],{"type":130,"value":2413},{"type":121,"tag":122,"props":2420,"children":2421},{},[2422],{"type":130,"value":2423},"The quality for the generated image(s).",{"type":121,"tag":230,"props":2425,"children":2427},{"className":232,"code":2426,"language":234,"meta":115},"\u003CNuxtImg src=\"/nuxt.jpg\" quality=\"80\" width=\"200\" height=\"100\" />\n",[2428],{"type":121,"tag":126,"props":2429,"children":2430},{"__ignoreMap":115},[2431],{"type":121,"tag":240,"props":2432,"children":2433},{"class":242,"line":243},[2434,2438,2442,2446,2450,2454,2458,2463,2467,2471,2475,2479,2483,2488,2492,2496,2500,2504,2508,2513,2517,2521,2525,2529,2533,2538,2542],{"type":121,"tag":240,"props":2435,"children":2436},{"class":247},[2437],{"type":130,"value":250},{"type":121,"tag":240,"props":2439,"children":2440},{"class":253},[2441],{"type":130,"value":256},{"type":121,"tag":240,"props":2443,"children":2444},{"class":247},[2445],{"type":130,"value":261},{"type":121,"tag":240,"props":2447,"children":2448},{"class":264},[2449],{"type":130,"value":159},{"type":121,"tag":240,"props":2451,"children":2452},{"class":247},[2453],{"type":130,"value":271},{"type":121,"tag":240,"props":2455,"children":2456},{"class":247},[2457],{"type":130,"value":276},{"type":121,"tag":240,"props":2459,"children":2460},{"class":279},[2461],{"type":130,"value":2462},"/nuxt.jpg",{"type":121,"tag":240,"props":2464,"children":2465},{"class":247},[2466],{"type":130,"value":276},{"type":121,"tag":240,"props":2468,"children":2469},{"class":247},[2470],{"type":130,"value":261},{"type":121,"tag":240,"props":2472,"children":2473},{"class":264},[2474],{"type":130,"value":2413},{"type":121,"tag":240,"props":2476,"children":2477},{"class":247},[2478],{"type":130,"value":271},{"type":121,"tag":240,"props":2480,"children":2481},{"class":247},[2482],{"type":130,"value":276},{"type":121,"tag":240,"props":2484,"children":2485},{"class":279},[2486],{"type":130,"value":2487},"80",{"type":121,"tag":240,"props":2489,"children":2490},{"class":247},[2491],{"type":130,"value":276},{"type":121,"tag":240,"props":2493,"children":2494},{"class":247},[2495],{"type":130,"value":261},{"type":121,"tag":240,"props":2497,"children":2498},{"class":264},[2499],{"type":130,"value":171},{"type":121,"tag":240,"props":2501,"children":2502},{"class":247},[2503],{"type":130,"value":271},{"type":121,"tag":240,"props":2505,"children":2506},{"class":247},[2507],{"type":130,"value":276},{"type":121,"tag":240,"props":2509,"children":2510},{"class":279},[2511],{"type":130,"value":2512},"200",{"type":121,"tag":240,"props":2514,"children":2515},{"class":247},[2516],{"type":130,"value":276},{"type":121,"tag":240,"props":2518,"children":2519},{"class":247},[2520],{"type":130,"value":261},{"type":121,"tag":240,"props":2522,"children":2523},{"class":264},[2524],{"type":130,"value":178},{"type":121,"tag":240,"props":2526,"children":2527},{"class":247},[2528],{"type":130,"value":271},{"type":121,"tag":240,"props":2530,"children":2531},{"class":247},[2532],{"type":130,"value":276},{"type":121,"tag":240,"props":2534,"children":2535},{"class":279},[2536],{"type":130,"value":2537},"100",{"type":121,"tag":240,"props":2539,"children":2540},{"class":247},[2541],{"type":130,"value":276},{"type":121,"tag":240,"props":2543,"children":2544},{"class":247},[2545],{"type":130,"value":291},{"type":121,"tag":380,"props":2547,"children":2548},{"id":2100},[2549],{"type":121,"tag":126,"props":2550,"children":2551},{},[2552],{"type":130,"value":2100},{"type":121,"tag":122,"props":2554,"children":2555},{},[2556,2558,2562],{"type":130,"value":2557},"The ",{"type":121,"tag":126,"props":2559,"children":2560},{},[2561],{"type":130,"value":2100},{"type":130,"value":2563}," property specifies the size of the images.\nThere are five standard values you can use with this property.",{"type":121,"tag":141,"props":2565,"children":2566},{},[2567,2576,2586,2596,2606],{"type":121,"tag":145,"props":2568,"children":2569},{},[2570,2574],{"type":121,"tag":126,"props":2571,"children":2572},{},[2573],{"type":130,"value":1907},{"type":130,"value":2575},": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit",{"type":121,"tag":145,"props":2577,"children":2578},{},[2579,2584],{"type":121,"tag":126,"props":2580,"children":2581},{},[2582],{"type":130,"value":2583},"contain",{"type":130,"value":2585},": Preserving aspect ratio, contain within both provided dimensions using \"letterboxing\" where necessary.",{"type":121,"tag":145,"props":2587,"children":2588},{},[2589,2594],{"type":121,"tag":126,"props":2590,"children":2591},{},[2592],{"type":130,"value":2593},"fill",{"type":130,"value":2595},": Ignore the aspect ratio of the input and stretch to both provided dimensions.",{"type":121,"tag":145,"props":2597,"children":2598},{},[2599,2604],{"type":121,"tag":126,"props":2600,"children":2601},{},[2602],{"type":130,"value":2603},"inside",{"type":130,"value":2605},": 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.",{"type":121,"tag":145,"props":2607,"children":2608},{},[2609,2614],{"type":121,"tag":126,"props":2610,"children":2611},{},[2612],{"type":130,"value":2613},"outside",{"type":130,"value":2615},": 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.",{"type":121,"tag":230,"props":2617,"children":2619},{"className":232,"code":2618,"language":234,"meta":115},"\u003CNuxtImg fit=\"cover\" src=\"/nuxt-icon.png\" width=\"200\" height=\"100\" />\n",[2620],{"type":121,"tag":126,"props":2621,"children":2622},{"__ignoreMap":115},[2623],{"type":121,"tag":240,"props":2624,"children":2625},{"class":242,"line":243},[2626,2630,2634,2638,2642,2646,2650,2654,2658,2662,2666,2670,2674,2678,2682,2686,2690,2694,2698,2702,2706,2710,2714,2718,2722,2726,2730],{"type":121,"tag":240,"props":2627,"children":2628},{"class":247},[2629],{"type":130,"value":250},{"type":121,"tag":240,"props":2631,"children":2632},{"class":253},[2633],{"type":130,"value":256},{"type":121,"tag":240,"props":2635,"children":2636},{"class":247},[2637],{"type":130,"value":261},{"type":121,"tag":240,"props":2639,"children":2640},{"class":264},[2641],{"type":130,"value":2100},{"type":121,"tag":240,"props":2643,"children":2644},{"class":247},[2645],{"type":130,"value":271},{"type":121,"tag":240,"props":2647,"children":2648},{"class":247},[2649],{"type":130,"value":276},{"type":121,"tag":240,"props":2651,"children":2652},{"class":279},[2653],{"type":130,"value":1907},{"type":121,"tag":240,"props":2655,"children":2656},{"class":247},[2657],{"type":130,"value":276},{"type":121,"tag":240,"props":2659,"children":2660},{"class":247},[2661],{"type":130,"value":261},{"type":121,"tag":240,"props":2663,"children":2664},{"class":264},[2665],{"type":130,"value":159},{"type":121,"tag":240,"props":2667,"children":2668},{"class":247},[2669],{"type":130,"value":271},{"type":121,"tag":240,"props":2671,"children":2672},{"class":247},[2673],{"type":130,"value":276},{"type":121,"tag":240,"props":2675,"children":2676},{"class":279},[2677],{"type":130,"value":282},{"type":121,"tag":240,"props":2679,"children":2680},{"class":247},[2681],{"type":130,"value":276},{"type":121,"tag":240,"props":2683,"children":2684},{"class":247},[2685],{"type":130,"value":261},{"type":121,"tag":240,"props":2687,"children":2688},{"class":264},[2689],{"type":130,"value":171},{"type":121,"tag":240,"props":2691,"children":2692},{"class":247},[2693],{"type":130,"value":271},{"type":121,"tag":240,"props":2695,"children":2696},{"class":247},[2697],{"type":130,"value":276},{"type":121,"tag":240,"props":2699,"children":2700},{"class":279},[2701],{"type":130,"value":2512},{"type":121,"tag":240,"props":2703,"children":2704},{"class":247},[2705],{"type":130,"value":276},{"type":121,"tag":240,"props":2707,"children":2708},{"class":247},[2709],{"type":130,"value":261},{"type":121,"tag":240,"props":2711,"children":2712},{"class":264},[2713],{"type":130,"value":178},{"type":121,"tag":240,"props":2715,"children":2716},{"class":247},[2717],{"type":130,"value":271},{"type":121,"tag":240,"props":2719,"children":2720},{"class":247},[2721],{"type":130,"value":276},{"type":121,"tag":240,"props":2723,"children":2724},{"class":279},[2725],{"type":130,"value":2537},{"type":121,"tag":240,"props":2727,"children":2728},{"class":247},[2729],{"type":130,"value":276},{"type":121,"tag":240,"props":2731,"children":2732},{"class":247},[2733],{"type":130,"value":291},{"type":121,"tag":344,"props":2735,"children":2736},{},[2737],{"type":121,"tag":122,"props":2738,"children":2739},{},[2740],{"type":130,"value":2741},"Some providers support other values.",{"type":121,"tag":380,"props":2743,"children":2744},{"id":2075},[2745],{"type":121,"tag":126,"props":2746,"children":2747},{},[2748],{"type":130,"value":2075},{"type":121,"tag":122,"props":2750,"children":2751},{},[2752],{"type":130,"value":2753},"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.",{"type":121,"tag":122,"props":2755,"children":2756},{},[2757,2759,2763],{"type":130,"value":2758},"Using the ",{"type":121,"tag":126,"props":2760,"children":2761},{},[2762],{"type":130,"value":2075},{"type":130,"value":2764}," prop lets you use any of these transformations.",{"type":121,"tag":122,"props":2766,"children":2767},{},[2768],{"type":121,"tag":554,"props":2769,"children":2770},{},[2771],{"type":130,"value":558},{"type":121,"tag":230,"props":2773,"children":2775},{"className":232,"code":2774,"language":234,"meta":115},"\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",[2776],{"type":121,"tag":126,"props":2777,"children":2778},{"__ignoreMap":115},[2779,2790,2817,2844,2871,2898,2927],{"type":121,"tag":240,"props":2780,"children":2781},{"class":242,"line":243},[2782,2786],{"type":121,"tag":240,"props":2783,"children":2784},{"class":247},[2785],{"type":130,"value":250},{"type":121,"tag":240,"props":2787,"children":2788},{"class":253},[2789],{"type":130,"value":577},{"type":121,"tag":240,"props":2791,"children":2792},{"class":242,"line":580},[2793,2797,2801,2805,2809,2813],{"type":121,"tag":240,"props":2794,"children":2795},{"class":247},[2796],{"type":130,"value":586},{"type":121,"tag":240,"props":2798,"children":2799},{"class":264},[2800],{"type":130,"value":1436},{"type":121,"tag":240,"props":2802,"children":2803},{"class":247},[2804],{"type":130,"value":271},{"type":121,"tag":240,"props":2806,"children":2807},{"class":247},[2808],{"type":130,"value":276},{"type":121,"tag":240,"props":2810,"children":2811},{"class":279},[2812],{"type":130,"value":1533},{"type":121,"tag":240,"props":2814,"children":2815},{"class":247},[2816],{"type":130,"value":608},{"type":121,"tag":240,"props":2818,"children":2819},{"class":242,"line":611},[2820,2824,2828,2832,2836,2840],{"type":121,"tag":240,"props":2821,"children":2822},{"class":247},[2823],{"type":130,"value":586},{"type":121,"tag":240,"props":2825,"children":2826},{"class":264},[2827],{"type":130,"value":159},{"type":121,"tag":240,"props":2829,"children":2830},{"class":247},[2831],{"type":130,"value":271},{"type":121,"tag":240,"props":2833,"children":2834},{"class":247},[2835],{"type":130,"value":276},{"type":121,"tag":240,"props":2837,"children":2838},{"class":279},[2839],{"type":130,"value":1561},{"type":121,"tag":240,"props":2841,"children":2842},{"class":247},[2843],{"type":130,"value":608},{"type":121,"tag":240,"props":2845,"children":2846},{"class":242,"line":640},[2847,2851,2855,2859,2863,2867],{"type":121,"tag":240,"props":2848,"children":2849},{"class":247},[2850],{"type":130,"value":586},{"type":121,"tag":240,"props":2852,"children":2853},{"class":264},[2854],{"type":130,"value":171},{"type":121,"tag":240,"props":2856,"children":2857},{"class":247},[2858],{"type":130,"value":271},{"type":121,"tag":240,"props":2860,"children":2861},{"class":247},[2862],{"type":130,"value":276},{"type":121,"tag":240,"props":2864,"children":2865},{"class":279},[2866],{"type":130,"value":1589},{"type":121,"tag":240,"props":2868,"children":2869},{"class":247},[2870],{"type":130,"value":608},{"type":121,"tag":240,"props":2872,"children":2873},{"class":242,"line":770},[2874,2878,2882,2886,2890,2894],{"type":121,"tag":240,"props":2875,"children":2876},{"class":247},[2877],{"type":130,"value":586},{"type":121,"tag":240,"props":2879,"children":2880},{"class":264},[2881],{"type":130,"value":178},{"type":121,"tag":240,"props":2883,"children":2884},{"class":247},[2885],{"type":130,"value":271},{"type":121,"tag":240,"props":2887,"children":2888},{"class":247},[2889],{"type":130,"value":276},{"type":121,"tag":240,"props":2891,"children":2892},{"class":279},[2893],{"type":130,"value":1617},{"type":121,"tag":240,"props":2895,"children":2896},{"class":247},[2897],{"type":130,"value":608},{"type":121,"tag":240,"props":2899,"children":2900},{"class":242,"line":779},[2901,2905,2910,2914,2918,2923],{"type":121,"tag":240,"props":2902,"children":2903},{"class":247},[2904],{"type":130,"value":586},{"type":121,"tag":240,"props":2906,"children":2907},{"class":264},[2908],{"type":130,"value":2909},":modifiers",{"type":121,"tag":240,"props":2911,"children":2912},{"class":247},[2913],{"type":130,"value":271},{"type":121,"tag":240,"props":2915,"children":2916},{"class":247},[2917],{"type":130,"value":276},{"type":121,"tag":240,"props":2919,"children":2920},{"class":279},[2921],{"type":130,"value":2922},"{ roundCorner: '0:100' }",{"type":121,"tag":240,"props":2924,"children":2925},{"class":247},[2926],{"type":130,"value":608},{"type":121,"tag":240,"props":2928,"children":2929},{"class":242,"line":789},[2930],{"type":121,"tag":240,"props":2931,"children":2932},{"class":247},[2933],{"type":130,"value":2934},"/>",{"type":121,"tag":380,"props":2936,"children":2938},{"id":2937},"preload",[2939],{"type":121,"tag":126,"props":2940,"children":2941},{},[2942],{"type":130,"value":2937},{"type":121,"tag":122,"props":2944,"children":2945},{},[2946,2948,2953],{"type":130,"value":2947},"In case you want to preload the image, use this prop. This will place a corresponding ",{"type":121,"tag":126,"props":2949,"children":2950},{},[2951],{"type":130,"value":2952},"link",{"type":130,"value":2954}," tag in the page's head.",{"type":121,"tag":230,"props":2956,"children":2958},{"className":232,"code":2957,"language":234,"meta":115},"\u003CNuxtImg preload src=\"/nuxt-icon.png\" />\n",[2959],{"type":121,"tag":126,"props":2960,"children":2961},{"__ignoreMap":115},[2962],{"type":121,"tag":240,"props":2963,"children":2964},{"class":242,"line":243},[2965,2969,2973,2977,2981,2985,2989,2993,2997,3001,3005],{"type":121,"tag":240,"props":2966,"children":2967},{"class":247},[2968],{"type":130,"value":250},{"type":121,"tag":240,"props":2970,"children":2971},{"class":253},[2972],{"type":130,"value":256},{"type":121,"tag":240,"props":2974,"children":2975},{"class":247},[2976],{"type":130,"value":261},{"type":121,"tag":240,"props":2978,"children":2979},{"class":264},[2980],{"type":130,"value":2937},{"type":121,"tag":240,"props":2982,"children":2983},{"class":247},[2984],{"type":130,"value":261},{"type":121,"tag":240,"props":2986,"children":2987},{"class":264},[2988],{"type":130,"value":159},{"type":121,"tag":240,"props":2990,"children":2991},{"class":247},[2992],{"type":130,"value":271},{"type":121,"tag":240,"props":2994,"children":2995},{"class":247},[2996],{"type":130,"value":276},{"type":121,"tag":240,"props":2998,"children":2999},{"class":279},[3000],{"type":130,"value":282},{"type":121,"tag":240,"props":3002,"children":3003},{"class":247},[3004],{"type":130,"value":276},{"type":121,"tag":240,"props":3006,"children":3007},{"class":247},[3008],{"type":130,"value":291},{"type":121,"tag":380,"props":3010,"children":3012},{"id":3011},"loading",[3013],{"type":121,"tag":126,"props":3014,"children":3015},{},[3016],{"type":130,"value":3011},{"type":121,"tag":122,"props":3018,"children":3019},{},[3020,3022,3030,3032,3039],{"type":130,"value":3021},"This is a ",{"type":121,"tag":353,"props":3023,"children":3027},{"href":3024,"rel":3025},"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading",[3026],"nofollow",[3028],{"type":130,"value":3029},"native",{"type":130,"value":3031}," attribute that provides a hint\nto the browser on how to handle the loading of an image which is outside the viewport.\nIt is ",{"type":121,"tag":353,"props":3033,"children":3036},{"href":3034,"rel":3035},"https://caniuse.com/loading-lazy-attr",[3026],[3037],{"type":130,"value":3038},"supported",{"type":130,"value":3040}," by the latest version of all major browsers since March 2022.",{"type":121,"tag":122,"props":3042,"children":3043},{},[3044,3046,3051],{"type":130,"value":3045},"Set ",{"type":121,"tag":126,"props":3047,"children":3048},{},[3049],{"type":130,"value":3050},"loading=\"lazy\"",{"type":130,"value":3052}," to defer loading of an image until it appears in the viewport.",{"type":121,"tag":230,"props":3054,"children":3056},{"className":232,"code":3055,"language":234,"meta":115},"\u003CNuxtImg src=\"/nuxt-icon.png\" loading=\"lazy\" />\n",[3057],{"type":121,"tag":126,"props":3058,"children":3059},{"__ignoreMap":115},[3060],{"type":121,"tag":240,"props":3061,"children":3062},{"class":242,"line":243},[3063,3067,3071,3075,3079,3083,3087,3091,3095,3099,3103,3107,3111,3116,3120],{"type":121,"tag":240,"props":3064,"children":3065},{"class":247},[3066],{"type":130,"value":250},{"type":121,"tag":240,"props":3068,"children":3069},{"class":253},[3070],{"type":130,"value":256},{"type":121,"tag":240,"props":3072,"children":3073},{"class":247},[3074],{"type":130,"value":261},{"type":121,"tag":240,"props":3076,"children":3077},{"class":264},[3078],{"type":130,"value":159},{"type":121,"tag":240,"props":3080,"children":3081},{"class":247},[3082],{"type":130,"value":271},{"type":121,"tag":240,"props":3084,"children":3085},{"class":247},[3086],{"type":130,"value":276},{"type":121,"tag":240,"props":3088,"children":3089},{"class":279},[3090],{"type":130,"value":282},{"type":121,"tag":240,"props":3092,"children":3093},{"class":247},[3094],{"type":130,"value":276},{"type":121,"tag":240,"props":3096,"children":3097},{"class":247},[3098],{"type":130,"value":261},{"type":121,"tag":240,"props":3100,"children":3101},{"class":264},[3102],{"type":130,"value":3011},{"type":121,"tag":240,"props":3104,"children":3105},{"class":247},[3106],{"type":130,"value":271},{"type":121,"tag":240,"props":3108,"children":3109},{"class":247},[3110],{"type":130,"value":276},{"type":121,"tag":240,"props":3112,"children":3113},{"class":279},[3114],{"type":130,"value":3115},"lazy",{"type":121,"tag":240,"props":3117,"children":3118},{"class":247},[3119],{"type":130,"value":276},{"type":121,"tag":240,"props":3121,"children":3122},{"class":247},[3123],{"type":130,"value":291},{"type":121,"tag":203,"props":3125,"children":3127},{"id":3126},"events",[3128],{"type":130,"value":3129},"Events",{"type":121,"tag":122,"props":3131,"children":3132},{},[3133,3135,3139,3141,3145,3146,3150],{"type":130,"value":3134},"Native events emitted by the ",{"type":121,"tag":126,"props":3136,"children":3137},{},[3138],{"type":130,"value":137},{"type":130,"value":3140}," element contained by ",{"type":121,"tag":126,"props":3142,"children":3143},{},[3144],{"type":130,"value":22},{"type":130,"value":173},{"type":121,"tag":126,"props":3147,"children":3148},{},[3149],{"type":130,"value":25},{"type":130,"value":3151}," components are re-emitted and can be listened to.",{"type":121,"tag":122,"props":3153,"children":3154},{},[3155,3159,3161,3166,3168],{"type":121,"tag":554,"props":3156,"children":3157},{},[3158],{"type":130,"value":558},{"type":130,"value":3160}," Listen to the native ",{"type":121,"tag":126,"props":3162,"children":3163},{},[3164],{"type":130,"value":3165},"onLoad",{"type":130,"value":3167}," event from ",{"type":121,"tag":126,"props":3169,"children":3170},{},[3171],{"type":130,"value":22},{"type":121,"tag":230,"props":3173,"children":3175},{"className":232,"code":3174,"language":234,"meta":115},"\u003CNuxtImg\n  src=\"/images/colors.jpg\"\n  width=\"500\"\n  height=\"500\"\n  @load=\"doSomethingOnLoad\"\n/>\n",[3176],{"type":121,"tag":126,"props":3177,"children":3178},{"__ignoreMap":115},[3179,3190,3218,3246,3273,3302],{"type":121,"tag":240,"props":3180,"children":3181},{"class":242,"line":243},[3182,3186],{"type":121,"tag":240,"props":3183,"children":3184},{"class":247},[3185],{"type":130,"value":250},{"type":121,"tag":240,"props":3187,"children":3188},{"class":253},[3189],{"type":130,"value":577},{"type":121,"tag":240,"props":3191,"children":3192},{"class":242,"line":580},[3193,3197,3201,3205,3209,3214],{"type":121,"tag":240,"props":3194,"children":3195},{"class":247},[3196],{"type":130,"value":586},{"type":121,"tag":240,"props":3198,"children":3199},{"class":264},[3200],{"type":130,"value":159},{"type":121,"tag":240,"props":3202,"children":3203},{"class":247},[3204],{"type":130,"value":271},{"type":121,"tag":240,"props":3206,"children":3207},{"class":247},[3208],{"type":130,"value":276},{"type":121,"tag":240,"props":3210,"children":3211},{"class":279},[3212],{"type":130,"value":3213},"/images/colors.jpg",{"type":121,"tag":240,"props":3215,"children":3216},{"class":247},[3217],{"type":130,"value":608},{"type":121,"tag":240,"props":3219,"children":3220},{"class":242,"line":611},[3221,3225,3229,3233,3237,3242],{"type":121,"tag":240,"props":3222,"children":3223},{"class":247},[3224],{"type":130,"value":586},{"type":121,"tag":240,"props":3226,"children":3227},{"class":264},[3228],{"type":130,"value":171},{"type":121,"tag":240,"props":3230,"children":3231},{"class":247},[3232],{"type":130,"value":271},{"type":121,"tag":240,"props":3234,"children":3235},{"class":247},[3236],{"type":130,"value":276},{"type":121,"tag":240,"props":3238,"children":3239},{"class":279},[3240],{"type":130,"value":3241},"500",{"type":121,"tag":240,"props":3243,"children":3244},{"class":247},[3245],{"type":130,"value":608},{"type":121,"tag":240,"props":3247,"children":3248},{"class":242,"line":640},[3249,3253,3257,3261,3265,3269],{"type":121,"tag":240,"props":3250,"children":3251},{"class":247},[3252],{"type":130,"value":586},{"type":121,"tag":240,"props":3254,"children":3255},{"class":264},[3256],{"type":130,"value":178},{"type":121,"tag":240,"props":3258,"children":3259},{"class":247},[3260],{"type":130,"value":271},{"type":121,"tag":240,"props":3262,"children":3263},{"class":247},[3264],{"type":130,"value":276},{"type":121,"tag":240,"props":3266,"children":3267},{"class":279},[3268],{"type":130,"value":3241},{"type":121,"tag":240,"props":3270,"children":3271},{"class":247},[3272],{"type":130,"value":608},{"type":121,"tag":240,"props":3274,"children":3275},{"class":242,"line":770},[3276,3280,3285,3289,3293,3298],{"type":121,"tag":240,"props":3277,"children":3278},{"class":247},[3279],{"type":130,"value":586},{"type":121,"tag":240,"props":3281,"children":3282},{"class":264},[3283],{"type":130,"value":3284},"@load",{"type":121,"tag":240,"props":3286,"children":3287},{"class":247},[3288],{"type":130,"value":271},{"type":121,"tag":240,"props":3290,"children":3291},{"class":247},[3292],{"type":130,"value":276},{"type":121,"tag":240,"props":3294,"children":3295},{"class":279},[3296],{"type":130,"value":3297},"doSomethingOnLoad",{"type":121,"tag":240,"props":3299,"children":3300},{"class":247},[3301],{"type":130,"value":608},{"type":121,"tag":240,"props":3303,"children":3304},{"class":242,"line":779},[3305],{"type":121,"tag":240,"props":3306,"children":3307},{"class":247},[3308],{"type":130,"value":2934},{"type":121,"tag":3310,"props":3311,"children":3312},"style",{},[3313],{"type":130,"value":3314},".material-theme_material-theme-palenight_material-theme-lighter{color:#EEFFFF;background:#263238;}.dark .material-theme_material-theme-palenight_material-theme-lighter{color:#A6ACCD;background:#292D3E;}.light .material-theme_material-theme-palenight_material-theme-lighter{color:#90A4AE;background:#FAFAFA;}.ct-542793{color:#89DDFF;}.light .ct-542793{color:#39ADB5;}.ct-821147{color:#F07178;}.light .ct-821147{color:#E53935;}.ct-366012{color:#C792EA;}.light .ct-366012{color:#9C3EDA;}.ct-083593{color:#C3E88D;}.light .ct-083593{color:#91B859;}.ct-767688{color:#546E7A;font-style:italic;}.dark .ct-767688{color:#676E95;font-style:italic;}.light .ct-767688{color:#90A4AE;font-style:italic;}.ct-521921{color:#EEFFFF;}.dark .ct-521921{color:#A6ACCD;}.light .ct-521921{color:#90A4AE;}.ct-021512{color:#82AAFF;}.light .ct-021512{color:#6182B8;}.ct-398028{color:#89DDFF;font-style:italic;}.light .ct-398028{color:#39ADB5;font-style:italic;}.ct-053683{color:#F78C6C;}.light .ct-053683{color:#F76D47;}",{"title":115,"searchDepth":580,"depth":580,"links":3316},[3317,3318,3334],{"id":113,"depth":580,"text":18},{"id":375,"depth":580,"text":378,"children":3319},[3320,3321,3323,3324,3325,3326,3327,3328,3329,3330,3331,3332,3333],{"id":159,"depth":611,"text":159},{"id":485,"depth":611,"text":3322},"width / height",{"id":188,"depth":611,"text":188},{"id":649,"depth":611,"text":649},{"id":833,"depth":611,"text":833},{"id":1436,"depth":611,"text":1436},{"id":1816,"depth":611,"text":1816},{"id":2136,"depth":611,"text":2136},{"id":2413,"depth":611,"text":2413},{"id":2100,"depth":611,"text":2100},{"id":2075,"depth":611,"text":2075},{"id":2937,"depth":611,"text":2937},{"id":3011,"depth":611,"text":3011},{"id":3126,"depth":580,"text":3129},"markdown","content:2.usage:1.nuxt-img.md","content","2.usage/1.nuxt-img.md","md",[3341,3636],{"_path":111,"_dir":3342,"_draft":114,"_partial":114,"_locale":115,"title":110,"description":3343,"body":3344,"_type":3335,"_id":3634,"_source":3337,"_file":3635,"_extension":3339},"advanced","Optimizing images for static websites.",{"type":118,"children":3345,"toc":3632},[3346,3358,3376,3388,3627],{"type":121,"tag":122,"props":3347,"children":3348},{},[3349,3351,3356],{"type":130,"value":3350},"If you are building a static site using ",{"type":121,"tag":126,"props":3352,"children":3353},{},[3354],{"type":130,"value":3355},"nuxt generate",{"type":130,"value":3357},", Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages.",{"type":121,"tag":122,"props":3359,"children":3360},{},[3361,3363,3368,3370,3374],{"type":130,"value":3362},"If you disabled server-side rendering (",{"type":121,"tag":126,"props":3364,"children":3365},{},[3366],{"type":130,"value":3367},"ssr: false",{"type":130,"value":3369}," in the ",{"type":121,"tag":126,"props":3371,"children":3372},{},[3373],{"type":130,"value":1459},{"type":130,"value":3375},"), Nuxt Image won't be able to optimize your images during the static generation process.",{"type":121,"tag":122,"props":3377,"children":3378},{},[3379,3381,3386],{"type":130,"value":3380},"In that case, you can tell Nuxt to pre-render images by using the ",{"type":121,"tag":126,"props":3382,"children":3383},{},[3384],{"type":130,"value":3385},"nitro.prerender.routes",{"type":130,"value":3387}," option:",{"type":121,"tag":230,"props":3389,"children":3391},{"className":1646,"code":3390,"language":1649,"meta":115},"export default defineNuxtConfig({\n  ssr: false,\n  nitro: {\n    prerender: {\n      routes: [\n        '/_ipx/w_120/market.jpg',\n        '/_ipx/w_140/market.jpg',\n        // etc.\n      ]\n    }\n  }\n})\n",[3392],{"type":121,"tag":126,"props":3393,"children":3394},{"__ignoreMap":115},[3395,3426,3456,3480,3504,3525,3549,3573,3585,3593,3605,3616],{"type":121,"tag":240,"props":3396,"children":3397},{"class":242,"line":243},[3398,3402,3406,3410,3414,3418,3422],{"type":121,"tag":240,"props":3399,"children":3400},{"class":1659},[3401],{"type":130,"value":1662},{"type":121,"tag":240,"props":3403,"children":3404},{"class":1266},[3405],{"type":130,"value":261},{"type":121,"tag":240,"props":3407,"children":3408},{"class":1659},[3409],{"type":130,"value":1671},{"type":121,"tag":240,"props":3411,"children":3412},{"class":1266},[3413],{"type":130,"value":261},{"type":121,"tag":240,"props":3415,"children":3416},{"class":1302},[3417],{"type":130,"value":1680},{"type":121,"tag":240,"props":3419,"children":3420},{"class":1266},[3421],{"type":130,"value":1685},{"type":121,"tag":240,"props":3423,"children":3424},{"class":247},[3425],{"type":130,"value":1690},{"type":121,"tag":240,"props":3427,"children":3428},{"class":242,"line":580},[3429,3433,3438,3442,3446,3452],{"type":121,"tag":240,"props":3430,"children":3431},{"class":1266},[3432],{"type":130,"value":586},{"type":121,"tag":240,"props":3434,"children":3435},{"class":253},[3436],{"type":130,"value":3437},"ssr",{"type":121,"tag":240,"props":3439,"children":3440},{"class":247},[3441],{"type":130,"value":1707},{"type":121,"tag":240,"props":3443,"children":3444},{"class":1266},[3445],{"type":130,"value":261},{"type":121,"tag":240,"props":3447,"children":3449},{"class":3448},"ct-358248",[3450],{"type":130,"value":3451},"false",{"type":121,"tag":240,"props":3453,"children":3454},{"class":247},[3455],{"type":130,"value":1778},{"type":121,"tag":240,"props":3457,"children":3458},{"class":242,"line":611},[3459,3463,3468,3472,3476],{"type":121,"tag":240,"props":3460,"children":3461},{"class":1266},[3462],{"type":130,"value":586},{"type":121,"tag":240,"props":3464,"children":3465},{"class":253},[3466],{"type":130,"value":3467},"nitro",{"type":121,"tag":240,"props":3469,"children":3470},{"class":247},[3471],{"type":130,"value":1707},{"type":121,"tag":240,"props":3473,"children":3474},{"class":1266},[3475],{"type":130,"value":261},{"type":121,"tag":240,"props":3477,"children":3478},{"class":247},[3479],{"type":130,"value":1690},{"type":121,"tag":240,"props":3481,"children":3482},{"class":242,"line":640},[3483,3487,3492,3496,3500],{"type":121,"tag":240,"props":3484,"children":3485},{"class":1266},[3486],{"type":130,"value":1516},{"type":121,"tag":240,"props":3488,"children":3489},{"class":253},[3490],{"type":130,"value":3491},"prerender",{"type":121,"tag":240,"props":3493,"children":3494},{"class":247},[3495],{"type":130,"value":1707},{"type":121,"tag":240,"props":3497,"children":3498},{"class":1266},[3499],{"type":130,"value":261},{"type":121,"tag":240,"props":3501,"children":3502},{"class":247},[3503],{"type":130,"value":1690},{"type":121,"tag":240,"props":3505,"children":3506},{"class":242,"line":770},[3507,3511,3516,3520],{"type":121,"tag":240,"props":3508,"children":3509},{"class":1266},[3510],{"type":130,"value":1746},{"type":121,"tag":240,"props":3512,"children":3513},{"class":253},[3514],{"type":130,"value":3515},"routes",{"type":121,"tag":240,"props":3517,"children":3518},{"class":247},[3519],{"type":130,"value":1707},{"type":121,"tag":240,"props":3521,"children":3522},{"class":1266},[3523],{"type":130,"value":3524}," [\n",{"type":121,"tag":240,"props":3526,"children":3527},{"class":242,"line":779},[3528,3532,3536,3541,3545],{"type":121,"tag":240,"props":3529,"children":3530},{"class":1266},[3531],{"type":130,"value":2070},{"type":121,"tag":240,"props":3533,"children":3534},{"class":247},[3535],{"type":130,"value":1764},{"type":121,"tag":240,"props":3537,"children":3538},{"class":279},[3539],{"type":130,"value":3540},"/_ipx/w_120/market.jpg",{"type":121,"tag":240,"props":3542,"children":3543},{"class":247},[3544],{"type":130,"value":1764},{"type":121,"tag":240,"props":3546,"children":3547},{"class":247},[3548],{"type":130,"value":1778},{"type":121,"tag":240,"props":3550,"children":3551},{"class":242,"line":789},[3552,3556,3560,3565,3569],{"type":121,"tag":240,"props":3553,"children":3554},{"class":1266},[3555],{"type":130,"value":2070},{"type":121,"tag":240,"props":3557,"children":3558},{"class":247},[3559],{"type":130,"value":1764},{"type":121,"tag":240,"props":3561,"children":3562},{"class":279},[3563],{"type":130,"value":3564},"/_ipx/w_140/market.jpg",{"type":121,"tag":240,"props":3566,"children":3567},{"class":247},[3568],{"type":130,"value":1764},{"type":121,"tag":240,"props":3570,"children":3571},{"class":247},[3572],{"type":130,"value":1778},{"type":121,"tag":240,"props":3574,"children":3575},{"class":242,"line":798},[3576,3580],{"type":121,"tag":240,"props":3577,"children":3578},{"class":247},[3579],{"type":130,"value":2070},{"type":121,"tag":240,"props":3581,"children":3582},{"class":783},[3583],{"type":130,"value":3584},"// etc.\n",{"type":121,"tag":240,"props":3586,"children":3587},{"class":242,"line":807},[3588],{"type":121,"tag":240,"props":3589,"children":3590},{"class":1266},[3591],{"type":130,"value":3592},"      ]\n",{"type":121,"tag":240,"props":3594,"children":3595},{"class":242,"line":816},[3596,3600],{"type":121,"tag":240,"props":3597,"children":3598},{"class":1266},[3599],{"type":130,"value":1516},{"type":121,"tag":240,"props":3601,"children":3602},{"class":247},[3603],{"type":130,"value":3604},"}\n",{"type":121,"tag":240,"props":3606,"children":3607},{"class":242,"line":824},[3608,3612],{"type":121,"tag":240,"props":3609,"children":3610},{"class":1266},[3611],{"type":130,"value":586},{"type":121,"tag":240,"props":3613,"children":3614},{"class":247},[3615],{"type":130,"value":3604},{"type":121,"tag":240,"props":3617,"children":3618},{"class":242,"line":1150},[3619,3623],{"type":121,"tag":240,"props":3620,"children":3621},{"class":247},[3622],{"type":130,"value":1809},{"type":121,"tag":240,"props":3624,"children":3625},{"class":1266},[3626],{"type":130,"value":524},{"type":121,"tag":3310,"props":3628,"children":3629},{},[3630],{"type":130,"value":3631},".material-theme_material-theme-palenight_material-theme-lighter{color:#EEFFFF;background:#263238;}.dark .material-theme_material-theme-palenight_material-theme-lighter{color:#A6ACCD;background:#292D3E;}.light .material-theme_material-theme-palenight_material-theme-lighter{color:#90A4AE;background:#FAFAFA;}.ct-398028{color:#89DDFF;font-style:italic;}.light .ct-398028{color:#39ADB5;font-style:italic;}.ct-521921{color:#EEFFFF;}.dark .ct-521921{color:#A6ACCD;}.light .ct-521921{color:#90A4AE;}.ct-021512{color:#82AAFF;}.light .ct-021512{color:#6182B8;}.ct-542793{color:#89DDFF;}.light .ct-542793{color:#39ADB5;}.ct-821147{color:#F07178;}.light .ct-821147{color:#E53935;}.ct-358248{color:#FF9CAC;}.light .ct-358248{color:#FF5370;}.ct-083593{color:#C3E88D;}.light .ct-083593{color:#91B859;}.ct-767688{color:#546E7A;font-style:italic;}.dark .ct-767688{color:#676E95;font-style:italic;}.light .ct-767688{color:#90A4AE;font-style:italic;}",{"title":115,"searchDepth":580,"depth":580,"links":3633},[],"content:4.advanced:2.static-images.md","4.advanced/2.static-images.md",{"_path":26,"_dir":113,"_draft":114,"_partial":114,"_locale":115,"title":25,"description":3637,"body":3638,"_type":3335,"_id":4019,"_source":3337,"_file":4020,"_extension":3339},"Discover how to use and configure the Nuxt Picture component.",{"type":118,"children":3639,"toc":4012},[3640,3654,3680,3698,3702,3718,3725,3730,3810,3844,3853,3858,3898,3907,3918,3925,4007],{"type":121,"tag":122,"props":3641,"children":3642},{},[3643,3647,3648,3653],{"type":121,"tag":126,"props":3644,"children":3645},{},[3646],{"type":130,"value":25},{"type":130,"value":132},{"type":121,"tag":126,"props":3649,"children":3650},{},[3651],{"type":130,"value":3652},"\u003Cpicture>",{"type":130,"value":139},{"type":121,"tag":122,"props":3655,"children":3656},{},[3657,3659,3663,3665,3672,3674,3678],{"type":130,"value":3658},"Usage of ",{"type":121,"tag":126,"props":3660,"children":3661},{},[3662],{"type":130,"value":25},{"type":130,"value":3664}," is almost identical to ",{"type":121,"tag":353,"props":3666,"children":3667},{"href":875},[3668],{"type":121,"tag":126,"props":3669,"children":3670},{},[3671],{"type":130,"value":22},{"type":130,"value":3673}," but also allows serving modern formats like ",{"type":121,"tag":126,"props":3675,"children":3676},{},[3677],{"type":130,"value":2322},{"type":130,"value":3679}," when possible.",{"type":121,"tag":122,"props":3681,"children":3682},{},[3683,3685,3696],{"type":130,"value":3684},"Learn more about the ",{"type":121,"tag":353,"props":3686,"children":3689},{"href":3687,"rel":3688},"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture",[3026],[3690,3694],{"type":121,"tag":126,"props":3691,"children":3692},{},[3693],{"type":130,"value":3652},{"type":130,"value":3695}," tag on MDN",{"type":130,"value":3697},".",{"type":121,"tag":203,"props":3699,"children":3700},{"id":375},[3701],{"type":130,"value":378},{"type":121,"tag":344,"props":3703,"children":3704},{},[3705],{"type":121,"tag":122,"props":3706,"children":3707},{},[3708,3710],{"type":130,"value":3709},"See props supported by",{"type":121,"tag":353,"props":3711,"children":3713},{"href":3712},"/usage/nuxt-img#props",[3714],{"type":121,"tag":126,"props":3715,"children":3716},{},[3717],{"type":130,"value":22},{"type":121,"tag":380,"props":3719,"children":3720},{"id":2136},[3721],{"type":121,"tag":126,"props":3722,"children":3723},{},[3724],{"type":130,"value":2136},{"type":121,"tag":122,"props":3726,"children":3727},{},[3728],{"type":130,"value":3729},"Format on pictures can be used to serve images in multiple formats. A legacy format will be generated automatically. So in the example below avif, webp and png would be generated. They will be added in the same order they are added to the format attribute.",{"type":121,"tag":230,"props":3731,"children":3733},{"className":232,"code":3732,"language":234,"meta":115},"\u003CNuxtPicture format=\"avif,webp\" src=\"/nuxt-icon.png\" ... />\n",[3734],{"type":121,"tag":126,"props":3735,"children":3736},{"__ignoreMap":115},[3737],{"type":121,"tag":240,"props":3738,"children":3739},{"class":242,"line":243},[3740,3744,3749,3753,3757,3761,3765,3770,3774,3778,3782,3786,3790,3794,3798,3802,3806],{"type":121,"tag":240,"props":3741,"children":3742},{"class":247},[3743],{"type":130,"value":250},{"type":121,"tag":240,"props":3745,"children":3746},{"class":253},[3747],{"type":130,"value":3748},"NuxtPicture",{"type":121,"tag":240,"props":3750,"children":3751},{"class":247},[3752],{"type":130,"value":261},{"type":121,"tag":240,"props":3754,"children":3755},{"class":264},[3756],{"type":130,"value":2136},{"type":121,"tag":240,"props":3758,"children":3759},{"class":247},[3760],{"type":130,"value":271},{"type":121,"tag":240,"props":3762,"children":3763},{"class":247},[3764],{"type":130,"value":276},{"type":121,"tag":240,"props":3766,"children":3767},{"class":279},[3768],{"type":130,"value":3769},"avif,webp",{"type":121,"tag":240,"props":3771,"children":3772},{"class":247},[3773],{"type":130,"value":276},{"type":121,"tag":240,"props":3775,"children":3776},{"class":247},[3777],{"type":130,"value":261},{"type":121,"tag":240,"props":3779,"children":3780},{"class":264},[3781],{"type":130,"value":159},{"type":121,"tag":240,"props":3783,"children":3784},{"class":247},[3785],{"type":130,"value":271},{"type":121,"tag":240,"props":3787,"children":3788},{"class":247},[3789],{"type":130,"value":276},{"type":121,"tag":240,"props":3791,"children":3792},{"class":279},[3793],{"type":130,"value":282},{"type":121,"tag":240,"props":3795,"children":3796},{"class":247},[3797],{"type":130,"value":276},{"type":121,"tag":240,"props":3799,"children":3800},{"class":247},[3801],{"type":130,"value":261},{"type":121,"tag":240,"props":3803,"children":3804},{"class":264},[3805],{"type":130,"value":2359},{"type":121,"tag":240,"props":3807,"children":3808},{"class":247},[3809],{"type":130,"value":291},{"type":121,"tag":122,"props":3811,"children":3812},{},[3813,3814,3818,3819,3823,3824,3828,3829,3833,3834,3838,3839,3843],{"type":130,"value":2368},{"type":121,"tag":126,"props":3815,"children":3816},{},[3817],{"type":130,"value":2322},{"type":130,"value":2374},{"type":121,"tag":126,"props":3820,"children":3821},{},[3822],{"type":130,"value":2379},{"type":130,"value":2374},{"type":121,"tag":126,"props":3825,"children":3826},{},[3827],{"type":130,"value":2385},{"type":130,"value":2374},{"type":121,"tag":126,"props":3830,"children":3831},{},[3832],{"type":130,"value":2153},{"type":130,"value":2374},{"type":121,"tag":126,"props":3835,"children":3836},{},[3837],{"type":130,"value":2396},{"type":130,"value":173},{"type":121,"tag":126,"props":3840,"children":3841},{},[3842],{"type":130,"value":2402},{"type":130,"value":2410},{"type":121,"tag":380,"props":3845,"children":3847},{"id":3846},"legacyformat",[3848],{"type":121,"tag":126,"props":3849,"children":3850},{},[3851],{"type":130,"value":3852},"legacyFormat",{"type":121,"tag":122,"props":3854,"children":3855},{},[3856],{"type":130,"value":3857},"Format used for fallback. Default is conditional:",{"type":121,"tag":141,"props":3859,"children":3860},{},[3861,3888],{"type":121,"tag":145,"props":3862,"children":3863},{},[3864,3866,3870,3871,3875,3876,3880,3882,3886],{"type":130,"value":3865},"If original format supports transparency (",{"type":121,"tag":126,"props":3867,"children":3868},{},[3869],{"type":130,"value":2396},{"type":130,"value":2374},{"type":121,"tag":126,"props":3872,"children":3873},{},[3874],{"type":130,"value":2322},{"type":130,"value":173},{"type":121,"tag":126,"props":3877,"children":3878},{},[3879],{"type":130,"value":2402},{"type":130,"value":3881},"), ",{"type":121,"tag":126,"props":3883,"children":3884},{},[3885],{"type":130,"value":2396},{"type":130,"value":3887}," is used for fallback",{"type":121,"tag":145,"props":3889,"children":3890},{},[3891,3893,3897],{"type":130,"value":3892},"Otherwise ",{"type":121,"tag":126,"props":3894,"children":3895},{},[3896],{"type":130,"value":2385},{"type":130,"value":3887},{"type":121,"tag":380,"props":3899,"children":3901},{"id":3900},"imgattrs",[3902],{"type":121,"tag":126,"props":3903,"children":3904},{},[3905],{"type":130,"value":3906},"imgAttrs",{"type":121,"tag":122,"props":3908,"children":3909},{},[3910,3912,3916],{"type":130,"value":3911},"Allows you to set additional HTML-attributes on the ",{"type":121,"tag":126,"props":3913,"children":3914},{},[3915],{"type":130,"value":220},{"type":130,"value":3917}," element.",{"type":121,"tag":122,"props":3919,"children":3920},{},[3921],{"type":121,"tag":554,"props":3922,"children":3923},{},[3924],{"type":130,"value":558},{"type":121,"tag":230,"props":3926,"children":3928},{"className":232,"code":3927,"language":234,"meta":115},"\u003CNuxtPicture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\"\n/>\n",[3929],{"type":121,"tag":126,"props":3930,"children":3931},{"__ignoreMap":115},[3932,3944,3971,4000],{"type":121,"tag":240,"props":3933,"children":3934},{"class":242,"line":243},[3935,3939],{"type":121,"tag":240,"props":3936,"children":3937},{"class":247},[3938],{"type":130,"value":250},{"type":121,"tag":240,"props":3940,"children":3941},{"class":253},[3942],{"type":130,"value":3943},"NuxtPicture\n",{"type":121,"tag":240,"props":3945,"children":3946},{"class":242,"line":580},[3947,3951,3955,3959,3963,3967],{"type":121,"tag":240,"props":3948,"children":3949},{"class":247},[3950],{"type":130,"value":586},{"type":121,"tag":240,"props":3952,"children":3953},{"class":264},[3954],{"type":130,"value":159},{"type":121,"tag":240,"props":3956,"children":3957},{"class":247},[3958],{"type":130,"value":271},{"type":121,"tag":240,"props":3960,"children":3961},{"class":247},[3962],{"type":130,"value":276},{"type":121,"tag":240,"props":3964,"children":3965},{"class":279},[3966],{"type":130,"value":282},{"type":121,"tag":240,"props":3968,"children":3969},{"class":247},[3970],{"type":130,"value":608},{"type":121,"tag":240,"props":3972,"children":3973},{"class":242,"line":611},[3974,3978,3983,3987,3991,3996],{"type":121,"tag":240,"props":3975,"children":3976},{"class":247},[3977],{"type":130,"value":586},{"type":121,"tag":240,"props":3979,"children":3980},{"class":264},[3981],{"type":130,"value":3982},":imgAttrs",{"type":121,"tag":240,"props":3984,"children":3985},{"class":247},[3986],{"type":130,"value":271},{"type":121,"tag":240,"props":3988,"children":3989},{"class":247},[3990],{"type":130,"value":276},{"type":121,"tag":240,"props":3992,"children":3993},{"class":279},[3994],{"type":130,"value":3995},"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}",{"type":121,"tag":240,"props":3997,"children":3998},{"class":247},[3999],{"type":130,"value":608},{"type":121,"tag":240,"props":4001,"children":4002},{"class":242,"line":640},[4003],{"type":121,"tag":240,"props":4004,"children":4005},{"class":247},[4006],{"type":130,"value":2934},{"type":121,"tag":3310,"props":4008,"children":4009},{},[4010],{"type":130,"value":4011},".material-theme_material-theme-palenight_material-theme-lighter{color:#EEFFFF;background:#263238;}.dark .material-theme_material-theme-palenight_material-theme-lighter{color:#A6ACCD;background:#292D3E;}.light .material-theme_material-theme-palenight_material-theme-lighter{color:#90A4AE;background:#FAFAFA;}.ct-542793{color:#89DDFF;}.light .ct-542793{color:#39ADB5;}.ct-821147{color:#F07178;}.light .ct-821147{color:#E53935;}.ct-366012{color:#C792EA;}.light .ct-366012{color:#9C3EDA;}.ct-083593{color:#C3E88D;}.light .ct-083593{color:#91B859;}",{"title":115,"searchDepth":580,"depth":580,"links":4013},[4014],{"id":375,"depth":580,"text":378,"children":4015},[4016,4017,4018],{"id":2136,"depth":611,"text":2136},{"id":3846,"depth":611,"text":3852},{"id":3900,"depth":611,"text":3906},"content:2.usage:2.nuxt-picture.md","2.usage/2.nuxt-picture.md",1693922869671]