[{"data":1,"prerenderedAt":3955},["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,3571],{"_path":16,"_dir":3342,"_draft":114,"_partial":114,"_locale":115,"title":15,"description":3343,"body":3344,"_type":3335,"_id":3569,"_source":3337,"_file":3570,"_extension":3339},"get-started","Nuxt Image supports multiple providers for high performances.",{"type":118,"children":3345,"toc":3560},[3346,3352,3357,3362,3374,3398,3404,3416,3422,3433,3457,3470,3492,3498,3511,3517,3529,3534,3544,3549],{"type":121,"tag":203,"props":3347,"children":3349},{"id":3348},"introduction-to-providers",[3350],{"type":130,"value":3351},"Introduction to providers",{"type":121,"tag":122,"props":3353,"children":3354},{},[3355],{"type":130,"value":3356},"Providers are integrations between Nuxt Image and third-party image transformation services. Each provider is responsible for generating correct URLs for that image transformation service.",{"type":121,"tag":122,"props":3358,"children":3359},{},[3360],{"type":130,"value":3361},"Nuxt Image can be configured to work with any external image transformation service. Checkout sidebar for list of preconfigured providers.",{"type":121,"tag":122,"props":3363,"children":3364},{},[3365,3367,3372],{"type":130,"value":3366},"If you are looking for a specific provider that is not already supported, you can ",{"type":121,"tag":353,"props":3368,"children":3369},{"href":108},[3370],{"type":130,"value":3371},"create your own provider",{"type":130,"value":3373},".",{"type":121,"tag":122,"props":3375,"children":3376},{},[3377,3379,3383,3385,3389,3391,3396],{"type":130,"value":3378},"Nuxt Image will automatically optimize ",{"type":121,"tag":126,"props":3380,"children":3381},{},[3382],{"type":130,"value":22},{"type":130,"value":3384}," or ",{"type":121,"tag":126,"props":3386,"children":3387},{},[3388],{"type":130,"value":25},{"type":130,"value":3390}," sources and accepts all ",{"type":121,"tag":353,"props":3392,"children":3393},{"href":13},[3394],{"type":130,"value":3395},"options",{"type":130,"value":3397}," for specified target, except for modifiers that are specific to other providers.",{"type":121,"tag":203,"props":3399,"children":3401},{"id":3400},"default-provider",[3402],{"type":130,"value":3403},"Default Provider",{"type":121,"tag":122,"props":3405,"children":3406},{},[3407,3409,3414],{"type":130,"value":3408},"The default optimizer and provider for Nuxt Image is ",{"type":121,"tag":353,"props":3410,"children":3411},{"href":71},[3412],{"type":130,"value":3413},"ipx",{"type":130,"value":3415},". Either option can be used without any configuration.",{"type":121,"tag":380,"props":3417,"children":3419},{"id":3418},"local-images",[3420],{"type":130,"value":3421},"Local Images",{"type":121,"tag":122,"props":3423,"children":3424},{},[3425,3427,3431],{"type":130,"value":3426},"Images should be stored in the ",{"type":121,"tag":126,"props":3428,"children":3429},{},[3430],{"type":130,"value":370},{"type":130,"value":3432}," directory of your project.",{"type":121,"tag":122,"props":3434,"children":3435},{},[3436,3438,3443,3445,3449,3451,3456],{"type":130,"value":3437},"For example, when using ",{"type":121,"tag":126,"props":3439,"children":3440},{},[3441],{"type":130,"value":3442},"\u003CNuxtImg src=\"/nuxt-icon.png\" />",{"type":130,"value":3444},", it should be placed in ",{"type":121,"tag":126,"props":3446,"children":3447},{},[3448],{"type":130,"value":370},{"type":130,"value":3450}," folder under the path ",{"type":121,"tag":126,"props":3452,"children":3453},{},[3454],{"type":130,"value":3455},"public/nuxt-icon.png",{"type":130,"value":3373},{"type":121,"tag":122,"props":3458,"children":3459},{},[3460,3462,3469],{"type":130,"value":3461},"For more information, you can learn more about the ",{"type":121,"tag":353,"props":3463,"children":3466},{"href":3464,"rel":3465},"https://nuxt.com/docs/guide/directory-structure/public",[3026],[3467],{"type":130,"value":3468},"public directory",{"type":130,"value":3373},{"type":121,"tag":344,"props":3471,"children":3472},{},[3473],{"type":121,"tag":122,"props":3474,"children":3475},{},[3476,3478,3483,3485,3490],{"type":130,"value":3477},"Image stored in the ",{"type":121,"tag":126,"props":3479,"children":3480},{},[3481],{"type":130,"value":3482},"assets/",{"type":130,"value":3484}," directory are ",{"type":121,"tag":554,"props":3486,"children":3487},{},[3488],{"type":130,"value":3489},"not",{"type":130,"value":3491}," proccessed with Nuxt Image because those images are managed by webpack.",{"type":121,"tag":380,"props":3493,"children":3495},{"id":3494},"remote-images",[3496],{"type":130,"value":3497},"Remote Images",{"type":121,"tag":122,"props":3499,"children":3500},{},[3501,3503,3510],{"type":130,"value":3502},"Using default provider, you can also optimize external URLs. For this, you need to add them to ",{"type":121,"tag":353,"props":3504,"children":3505},{"href":474},[3506],{"type":121,"tag":126,"props":3507,"children":3508},{},[3509],{"type":130,"value":480},{"type":130,"value":482},{"type":121,"tag":380,"props":3512,"children":3514},{"id":3513},"environment-detection",[3515],{"type":130,"value":3516},"Environment Detection",{"type":121,"tag":122,"props":3518,"children":3519},{},[3520,3522,3527],{"type":130,"value":3521},"You can set default provider using ",{"type":121,"tag":126,"props":3523,"children":3524},{},[3525],{"type":130,"value":3526},"NUXT_IMAGE_PROVIDER",{"type":130,"value":3528}," environment variable.",{"type":121,"tag":122,"props":3530,"children":3531},{},[3532],{"type":130,"value":3533},"Providers detected automatically:",{"type":121,"tag":141,"props":3535,"children":3536},{},[3537],{"type":121,"tag":145,"props":3538,"children":3539},{},[3540],{"type":121,"tag":353,"props":3541,"children":3542},{"href":101},[3543],{"type":130,"value":100},{"type":121,"tag":380,"props":3545,"children":3547},{"id":3546},"custom-provider",[3548],{"type":130,"value":107},{"type":121,"tag":122,"props":3550,"children":3551},{},[3552,3554,3559],{"type":130,"value":3553},"It is possible to define your own provider, learn more ",{"type":121,"tag":353,"props":3555,"children":3556},{"href":108},[3557],{"type":130,"value":3558},"how to create a custom provider",{"type":130,"value":3373},{"title":115,"searchDepth":580,"depth":580,"links":3561},[3562,3563],{"id":3348,"depth":580,"text":3351},{"id":3400,"depth":580,"text":3403,"children":3564},[3565,3566,3567,3568],{"id":3418,"depth":611,"text":3421},{"id":3494,"depth":611,"text":3497},{"id":3513,"depth":611,"text":3516},{"id":3546,"depth":611,"text":107},"content:1.get-started:5.providers.md","1.get-started/5.providers.md",{"_path":26,"_dir":113,"_draft":114,"_partial":114,"_locale":115,"title":25,"description":3572,"body":3573,"_type":3335,"_id":3953,"_source":3337,"_file":3954,"_extension":3339},"Discover how to use and configure the Nuxt Picture component.",{"type":118,"children":3574,"toc":3946},[3575,3589,3615,3632,3636,3652,3659,3664,3744,3778,3787,3792,3832,3841,3852,3859,3941],{"type":121,"tag":122,"props":3576,"children":3577},{},[3578,3582,3583,3588],{"type":121,"tag":126,"props":3579,"children":3580},{},[3581],{"type":130,"value":25},{"type":130,"value":132},{"type":121,"tag":126,"props":3584,"children":3585},{},[3586],{"type":130,"value":3587},"\u003Cpicture>",{"type":130,"value":139},{"type":121,"tag":122,"props":3590,"children":3591},{},[3592,3594,3598,3600,3607,3609,3613],{"type":130,"value":3593},"Usage of ",{"type":121,"tag":126,"props":3595,"children":3596},{},[3597],{"type":130,"value":25},{"type":130,"value":3599}," is almost identical to ",{"type":121,"tag":353,"props":3601,"children":3602},{"href":875},[3603],{"type":121,"tag":126,"props":3604,"children":3605},{},[3606],{"type":130,"value":22},{"type":130,"value":3608}," but also allows serving modern formats like ",{"type":121,"tag":126,"props":3610,"children":3611},{},[3612],{"type":130,"value":2322},{"type":130,"value":3614}," when possible.",{"type":121,"tag":122,"props":3616,"children":3617},{},[3618,3620,3631],{"type":130,"value":3619},"Learn more about the ",{"type":121,"tag":353,"props":3621,"children":3624},{"href":3622,"rel":3623},"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture",[3026],[3625,3629],{"type":121,"tag":126,"props":3626,"children":3627},{},[3628],{"type":130,"value":3587},{"type":130,"value":3630}," tag on MDN",{"type":130,"value":3373},{"type":121,"tag":203,"props":3633,"children":3634},{"id":375},[3635],{"type":130,"value":378},{"type":121,"tag":344,"props":3637,"children":3638},{},[3639],{"type":121,"tag":122,"props":3640,"children":3641},{},[3642,3644],{"type":130,"value":3643},"See props supported by",{"type":121,"tag":353,"props":3645,"children":3647},{"href":3646},"/usage/nuxt-img#props",[3648],{"type":121,"tag":126,"props":3649,"children":3650},{},[3651],{"type":130,"value":22},{"type":121,"tag":380,"props":3653,"children":3654},{"id":2136},[3655],{"type":121,"tag":126,"props":3656,"children":3657},{},[3658],{"type":130,"value":2136},{"type":121,"tag":122,"props":3660,"children":3661},{},[3662],{"type":130,"value":3663},"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":3665,"children":3667},{"className":232,"code":3666,"language":234,"meta":115},"\u003CNuxtPicture format=\"avif,webp\" src=\"/nuxt-icon.png\" ... />\n",[3668],{"type":121,"tag":126,"props":3669,"children":3670},{"__ignoreMap":115},[3671],{"type":121,"tag":240,"props":3672,"children":3673},{"class":242,"line":243},[3674,3678,3683,3687,3691,3695,3699,3704,3708,3712,3716,3720,3724,3728,3732,3736,3740],{"type":121,"tag":240,"props":3675,"children":3676},{"class":247},[3677],{"type":130,"value":250},{"type":121,"tag":240,"props":3679,"children":3680},{"class":253},[3681],{"type":130,"value":3682},"NuxtPicture",{"type":121,"tag":240,"props":3684,"children":3685},{"class":247},[3686],{"type":130,"value":261},{"type":121,"tag":240,"props":3688,"children":3689},{"class":264},[3690],{"type":130,"value":2136},{"type":121,"tag":240,"props":3692,"children":3693},{"class":247},[3694],{"type":130,"value":271},{"type":121,"tag":240,"props":3696,"children":3697},{"class":247},[3698],{"type":130,"value":276},{"type":121,"tag":240,"props":3700,"children":3701},{"class":279},[3702],{"type":130,"value":3703},"avif,webp",{"type":121,"tag":240,"props":3705,"children":3706},{"class":247},[3707],{"type":130,"value":276},{"type":121,"tag":240,"props":3709,"children":3710},{"class":247},[3711],{"type":130,"value":261},{"type":121,"tag":240,"props":3713,"children":3714},{"class":264},[3715],{"type":130,"value":159},{"type":121,"tag":240,"props":3717,"children":3718},{"class":247},[3719],{"type":130,"value":271},{"type":121,"tag":240,"props":3721,"children":3722},{"class":247},[3723],{"type":130,"value":276},{"type":121,"tag":240,"props":3725,"children":3726},{"class":279},[3727],{"type":130,"value":282},{"type":121,"tag":240,"props":3729,"children":3730},{"class":247},[3731],{"type":130,"value":276},{"type":121,"tag":240,"props":3733,"children":3734},{"class":247},[3735],{"type":130,"value":261},{"type":121,"tag":240,"props":3737,"children":3738},{"class":264},[3739],{"type":130,"value":2359},{"type":121,"tag":240,"props":3741,"children":3742},{"class":247},[3743],{"type":130,"value":291},{"type":121,"tag":122,"props":3745,"children":3746},{},[3747,3748,3752,3753,3757,3758,3762,3763,3767,3768,3772,3773,3777],{"type":130,"value":2368},{"type":121,"tag":126,"props":3749,"children":3750},{},[3751],{"type":130,"value":2322},{"type":130,"value":2374},{"type":121,"tag":126,"props":3754,"children":3755},{},[3756],{"type":130,"value":2379},{"type":130,"value":2374},{"type":121,"tag":126,"props":3759,"children":3760},{},[3761],{"type":130,"value":2385},{"type":130,"value":2374},{"type":121,"tag":126,"props":3764,"children":3765},{},[3766],{"type":130,"value":2153},{"type":130,"value":2374},{"type":121,"tag":126,"props":3769,"children":3770},{},[3771],{"type":130,"value":2396},{"type":130,"value":173},{"type":121,"tag":126,"props":3774,"children":3775},{},[3776],{"type":130,"value":2402},{"type":130,"value":2410},{"type":121,"tag":380,"props":3779,"children":3781},{"id":3780},"legacyformat",[3782],{"type":121,"tag":126,"props":3783,"children":3784},{},[3785],{"type":130,"value":3786},"legacyFormat",{"type":121,"tag":122,"props":3788,"children":3789},{},[3790],{"type":130,"value":3791},"Format used for fallback. Default is conditional:",{"type":121,"tag":141,"props":3793,"children":3794},{},[3795,3822],{"type":121,"tag":145,"props":3796,"children":3797},{},[3798,3800,3804,3805,3809,3810,3814,3816,3820],{"type":130,"value":3799},"If original format supports transparency (",{"type":121,"tag":126,"props":3801,"children":3802},{},[3803],{"type":130,"value":2396},{"type":130,"value":2374},{"type":121,"tag":126,"props":3806,"children":3807},{},[3808],{"type":130,"value":2322},{"type":130,"value":173},{"type":121,"tag":126,"props":3811,"children":3812},{},[3813],{"type":130,"value":2402},{"type":130,"value":3815},"), ",{"type":121,"tag":126,"props":3817,"children":3818},{},[3819],{"type":130,"value":2396},{"type":130,"value":3821}," is used for fallback",{"type":121,"tag":145,"props":3823,"children":3824},{},[3825,3827,3831],{"type":130,"value":3826},"Otherwise ",{"type":121,"tag":126,"props":3828,"children":3829},{},[3830],{"type":130,"value":2385},{"type":130,"value":3821},{"type":121,"tag":380,"props":3833,"children":3835},{"id":3834},"imgattrs",[3836],{"type":121,"tag":126,"props":3837,"children":3838},{},[3839],{"type":130,"value":3840},"imgAttrs",{"type":121,"tag":122,"props":3842,"children":3843},{},[3844,3846,3850],{"type":130,"value":3845},"Allows you to set additional HTML-attributes on the ",{"type":121,"tag":126,"props":3847,"children":3848},{},[3849],{"type":130,"value":220},{"type":130,"value":3851}," element.",{"type":121,"tag":122,"props":3853,"children":3854},{},[3855],{"type":121,"tag":554,"props":3856,"children":3857},{},[3858],{"type":130,"value":558},{"type":121,"tag":230,"props":3860,"children":3862},{"className":232,"code":3861,"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",[3863],{"type":121,"tag":126,"props":3864,"children":3865},{"__ignoreMap":115},[3866,3878,3905,3934],{"type":121,"tag":240,"props":3867,"children":3868},{"class":242,"line":243},[3869,3873],{"type":121,"tag":240,"props":3870,"children":3871},{"class":247},[3872],{"type":130,"value":250},{"type":121,"tag":240,"props":3874,"children":3875},{"class":253},[3876],{"type":130,"value":3877},"NuxtPicture\n",{"type":121,"tag":240,"props":3879,"children":3880},{"class":242,"line":580},[3881,3885,3889,3893,3897,3901],{"type":121,"tag":240,"props":3882,"children":3883},{"class":247},[3884],{"type":130,"value":586},{"type":121,"tag":240,"props":3886,"children":3887},{"class":264},[3888],{"type":130,"value":159},{"type":121,"tag":240,"props":3890,"children":3891},{"class":247},[3892],{"type":130,"value":271},{"type":121,"tag":240,"props":3894,"children":3895},{"class":247},[3896],{"type":130,"value":276},{"type":121,"tag":240,"props":3898,"children":3899},{"class":279},[3900],{"type":130,"value":282},{"type":121,"tag":240,"props":3902,"children":3903},{"class":247},[3904],{"type":130,"value":608},{"type":121,"tag":240,"props":3906,"children":3907},{"class":242,"line":611},[3908,3912,3917,3921,3925,3930],{"type":121,"tag":240,"props":3909,"children":3910},{"class":247},[3911],{"type":130,"value":586},{"type":121,"tag":240,"props":3913,"children":3914},{"class":264},[3915],{"type":130,"value":3916},":imgAttrs",{"type":121,"tag":240,"props":3918,"children":3919},{"class":247},[3920],{"type":130,"value":271},{"type":121,"tag":240,"props":3922,"children":3923},{"class":247},[3924],{"type":130,"value":276},{"type":121,"tag":240,"props":3926,"children":3927},{"class":279},[3928],{"type":130,"value":3929},"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}",{"type":121,"tag":240,"props":3931,"children":3932},{"class":247},[3933],{"type":130,"value":608},{"type":121,"tag":240,"props":3935,"children":3936},{"class":242,"line":640},[3937],{"type":121,"tag":240,"props":3938,"children":3939},{"class":247},[3940],{"type":130,"value":2934},{"type":121,"tag":3310,"props":3942,"children":3943},{},[3944],{"type":130,"value":3945},".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":3947},[3948],{"id":375,"depth":580,"text":378,"children":3949},[3950,3951,3952],{"id":2136,"depth":611,"text":2136},{"id":3780,"depth":611,"text":3786},{"id":3834,"depth":611,"text":3840},"content:2.usage:2.nuxt-picture.md","2.usage/2.nuxt-picture.md",1694348693408]