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