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