[{"data":1,"prerenderedAt":2419},["Reactive",2],{"navigation":3,"docs-/usage/use-image":133,"docs-/usage/use-image-surround":1522},[4,20,33,123],{"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],{"title":37,"_path":38},"Aliyun","/providers/aliyun",{"title":40,"_path":41},"AWS Amplify","/providers/aws-amplify",{"title":43,"_path":44},"Caisy","/providers/caisy",{"title":46,"_path":47},"Cloudflare","/providers/cloudflare",{"title":49,"_path":50},"Cloudimage","/providers/cloudimage",{"title":52,"_path":53},"Cloudinary","/providers/cloudinary",{"title":55,"_path":56},"Contentful","/providers/contentful",{"title":58,"_path":59},"Directus","/providers/directus",{"title":61,"_path":62},"Edgio","/providers/edgio",{"title":64,"_path":65},"Fastly","/providers/fastly",{"title":67,"_path":68},"Glide","/providers/glide",{"title":70,"_path":71},"Gumlet","/providers/gumlet",{"title":73,"_path":74},"Hygraph","/providers/hygraph",{"title":76,"_path":77},"ImageEngine","/providers/imageengine",{"title":79,"_path":80},"ImageKit","/providers/imagekit",{"title":82,"_path":83},"Imgix","/providers/imgix",{"title":85,"_path":86},"IPX","/providers/ipx",{"title":88,"_path":89},"Netlify","/providers/netlify",{"title":91,"_path":92},"Prepr","/providers/prepr",{"title":94,"_path":95},"Prismic","/providers/prismic",{"title":97,"_path":98},"Sanity","/providers/sanity",{"title":100,"_path":101},"Sirv","/providers/sirv",{"title":103,"_path":104},"Storyblok","/providers/storyblok",{"title":106,"_path":107},"Strapi","/providers/strapi",{"title":109,"_path":110},"Twicpics","/providers/twicpics",{"title":112,"_path":113},"Unsplash","/providers/unsplash",{"title":115,"_path":116},"Uploadcare","/providers/uploadcare",{"title":118,"_path":119},"Vercel","/providers/vercel",{"title":121,"_path":122},"Weserv","/providers/weserv",{"title":124,"_path":125,"children":126},"Advanced","/advanced",[127,130],{"title":128,"_path":129},"Custom Provider","/advanced/custom-provider",{"title":131,"_path":132},"Static Images","/advanced/static-images",{"_path":32,"_dir":134,"_draft":135,"_partial":135,"_locale":136,"title":31,"description":137,"links":138,"body":144,"_type":1517,"_id":1518,"_source":1519,"_file":1520,"_extension":1521},"usage",false,"","A Vue composable that returns a helper function to generate optimized image URLs.",[139],{"label":140,"icon":141,"to":142,"size":143},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/composables.ts","xs",{"type":145,"children":146,"toc":1512},"root",[147,188,193,280,298,522,532,620,635,643,773,787,1506],{"type":148,"tag":149,"props":150,"children":151},"element","p",{},[152,155,160,162,166,168,172,174,179,181,186],{"type":153,"value":154},"text","Sometimes you might need to use a generated image URL directly with applied transformations instead of the ",{"type":148,"tag":156,"props":157,"children":158},"code",{"className":136},[159],{"type":153,"value":25},{"type":153,"value":161}," and ",{"type":148,"tag":156,"props":163,"children":164},{"className":136},[165],{"type":153,"value":28},{"type":153,"value":167}," components. This is where ",{"type":148,"tag":156,"props":169,"children":170},{"className":136},[171],{"type":153,"value":31},{"type":153,"value":173}," comes in (and the helper function it returns, which you will often see referenced directly as ",{"type":148,"tag":156,"props":175,"children":176},{"className":136},[177],{"type":153,"value":178},"$img",{"type":153,"value":180}," or ",{"type":148,"tag":156,"props":182,"children":183},{"className":136},[184],{"type":153,"value":185},"img",{"type":153,"value":187},").",{"type":148,"tag":189,"props":190,"children":191},"h2",{"id":134},[192],{"type":153,"value":21},{"type":148,"tag":194,"props":195,"children":199},"pre",{"className":196,"code":197,"language":198,"meta":136,"style":136},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const img = useImage()\n\nimg(src, modifiers, options)\n","js",[200],{"type":148,"tag":156,"props":201,"children":202},{"__ignoreMap":136},[203,238,248],{"type":148,"tag":204,"props":205,"children":208},"span",{"class":206,"line":207},"line",1,[209,215,221,227,233],{"type":148,"tag":204,"props":210,"children":212},{"style":211},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[213],{"type":153,"value":214},"const",{"type":148,"tag":204,"props":216,"children":218},{"style":217},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[219],{"type":153,"value":220}," img ",{"type":148,"tag":204,"props":222,"children":224},{"style":223},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[225],{"type":153,"value":226},"=",{"type":148,"tag":204,"props":228,"children":230},{"style":229},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[231],{"type":153,"value":232}," useImage",{"type":148,"tag":204,"props":234,"children":235},{"style":217},[236],{"type":153,"value":237},"()\n",{"type":148,"tag":204,"props":239,"children":241},{"class":206,"line":240},2,[242],{"type":148,"tag":204,"props":243,"children":245},{"emptyLinePlaceholder":244},true,[246],{"type":153,"value":247},"\n",{"type":148,"tag":204,"props":249,"children":251},{"class":206,"line":250},3,[252,256,261,266,271,275],{"type":148,"tag":204,"props":253,"children":254},{"style":229},[255],{"type":153,"value":185},{"type":148,"tag":204,"props":257,"children":258},{"style":217},[259],{"type":153,"value":260},"(src",{"type":148,"tag":204,"props":262,"children":263},{"style":223},[264],{"type":153,"value":265},",",{"type":148,"tag":204,"props":267,"children":268},{"style":217},[269],{"type":153,"value":270}," modifiers",{"type":148,"tag":204,"props":272,"children":273},{"style":223},[274],{"type":153,"value":265},{"type":148,"tag":204,"props":276,"children":277},{"style":217},[278],{"type":153,"value":279}," options)\n",{"type":148,"tag":149,"props":281,"children":282},{},[283,289,291,296],{"type":148,"tag":284,"props":285,"children":286},"strong",{},[287],{"type":153,"value":288},"Example:",{"type":153,"value":290}," Generate image URL for ",{"type":148,"tag":156,"props":292,"children":293},{"className":136},[294],{"type":153,"value":295},"backgroundImage",{"type":153,"value":297}," style.",{"type":148,"tag":194,"props":299,"children":301},{"className":196,"code":300,"language":198,"meta":136,"style":136},"const img = useImage()\nconst backgroundStyles = computed(() => {\n  const imgUrl = img('https://github.com/nuxt.png', { width: 100 })\n  return { backgroundImage: `url('${imgUrl}')` }\n})\n",[302],{"type":148,"tag":156,"props":303,"children":304},{"__ignoreMap":136},[305,328,369,447,510],{"type":148,"tag":204,"props":306,"children":307},{"class":206,"line":207},[308,312,316,320,324],{"type":148,"tag":204,"props":309,"children":310},{"style":211},[311],{"type":153,"value":214},{"type":148,"tag":204,"props":313,"children":314},{"style":217},[315],{"type":153,"value":220},{"type":148,"tag":204,"props":317,"children":318},{"style":223},[319],{"type":153,"value":226},{"type":148,"tag":204,"props":321,"children":322},{"style":229},[323],{"type":153,"value":232},{"type":148,"tag":204,"props":325,"children":326},{"style":217},[327],{"type":153,"value":237},{"type":148,"tag":204,"props":329,"children":330},{"class":206,"line":240},[331,335,340,344,349,354,359,364],{"type":148,"tag":204,"props":332,"children":333},{"style":211},[334],{"type":153,"value":214},{"type":148,"tag":204,"props":336,"children":337},{"style":217},[338],{"type":153,"value":339}," backgroundStyles ",{"type":148,"tag":204,"props":341,"children":342},{"style":223},[343],{"type":153,"value":226},{"type":148,"tag":204,"props":345,"children":346},{"style":229},[347],{"type":153,"value":348}," computed",{"type":148,"tag":204,"props":350,"children":351},{"style":217},[352],{"type":153,"value":353},"(",{"type":148,"tag":204,"props":355,"children":356},{"style":223},[357],{"type":153,"value":358},"()",{"type":148,"tag":204,"props":360,"children":361},{"style":211},[362],{"type":153,"value":363}," =>",{"type":148,"tag":204,"props":365,"children":366},{"style":223},[367],{"type":153,"value":368}," {\n",{"type":148,"tag":204,"props":370,"children":371},{"class":206,"line":250},[372,377,382,387,392,397,402,408,412,416,421,426,431,437,442],{"type":148,"tag":204,"props":373,"children":374},{"style":211},[375],{"type":153,"value":376},"  const",{"type":148,"tag":204,"props":378,"children":379},{"style":217},[380],{"type":153,"value":381}," imgUrl",{"type":148,"tag":204,"props":383,"children":384},{"style":223},[385],{"type":153,"value":386}," =",{"type":148,"tag":204,"props":388,"children":389},{"style":229},[390],{"type":153,"value":391}," img",{"type":148,"tag":204,"props":393,"children":395},{"style":394},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[396],{"type":153,"value":353},{"type":148,"tag":204,"props":398,"children":399},{"style":223},[400],{"type":153,"value":401},"'",{"type":148,"tag":204,"props":403,"children":405},{"style":404},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[406],{"type":153,"value":407},"https://github.com/nuxt.png",{"type":148,"tag":204,"props":409,"children":410},{"style":223},[411],{"type":153,"value":401},{"type":148,"tag":204,"props":413,"children":414},{"style":223},[415],{"type":153,"value":265},{"type":148,"tag":204,"props":417,"children":418},{"style":223},[419],{"type":153,"value":420}," {",{"type":148,"tag":204,"props":422,"children":423},{"style":394},[424],{"type":153,"value":425}," width",{"type":148,"tag":204,"props":427,"children":428},{"style":223},[429],{"type":153,"value":430},":",{"type":148,"tag":204,"props":432,"children":434},{"style":433},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[435],{"type":153,"value":436}," 100",{"type":148,"tag":204,"props":438,"children":439},{"style":223},[440],{"type":153,"value":441}," }",{"type":148,"tag":204,"props":443,"children":444},{"style":394},[445],{"type":153,"value":446},")\n",{"type":148,"tag":204,"props":448,"children":450},{"class":206,"line":449},4,[451,457,461,466,470,475,480,485,490,495,500,505],{"type":148,"tag":204,"props":452,"children":454},{"style":453},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[455],{"type":153,"value":456},"  return",{"type":148,"tag":204,"props":458,"children":459},{"style":223},[460],{"type":153,"value":420},{"type":148,"tag":204,"props":462,"children":463},{"style":394},[464],{"type":153,"value":465}," backgroundImage",{"type":148,"tag":204,"props":467,"children":468},{"style":223},[469],{"type":153,"value":430},{"type":148,"tag":204,"props":471,"children":472},{"style":223},[473],{"type":153,"value":474}," `",{"type":148,"tag":204,"props":476,"children":477},{"style":404},[478],{"type":153,"value":479},"url('",{"type":148,"tag":204,"props":481,"children":482},{"style":223},[483],{"type":153,"value":484},"${",{"type":148,"tag":204,"props":486,"children":487},{"style":217},[488],{"type":153,"value":489},"imgUrl",{"type":148,"tag":204,"props":491,"children":492},{"style":223},[493],{"type":153,"value":494},"}",{"type":148,"tag":204,"props":496,"children":497},{"style":404},[498],{"type":153,"value":499},"')",{"type":148,"tag":204,"props":501,"children":502},{"style":223},[503],{"type":153,"value":504},"`",{"type":148,"tag":204,"props":506,"children":507},{"style":223},[508],{"type":153,"value":509}," }\n",{"type":148,"tag":204,"props":511,"children":513},{"class":206,"line":512},5,[514,518],{"type":148,"tag":204,"props":515,"children":516},{"style":223},[517],{"type":153,"value":494},{"type":148,"tag":204,"props":519,"children":520},{"style":217},[521],{"type":153,"value":446},{"type":148,"tag":523,"props":524,"children":526},"h3",{"id":525},"imggetsizes",[527],{"type":148,"tag":156,"props":528,"children":529},{"className":136},[530],{"type":153,"value":531},"img.getSizes",{"type":148,"tag":194,"props":533,"children":535},{"className":196,"code":534,"language":198,"meta":136,"style":136},"const img = useImage()\n\nimg.getSizes(src, { sizes, modifiers })\n",[536],{"type":148,"tag":156,"props":537,"children":538},{"__ignoreMap":136},[539,562,569],{"type":148,"tag":204,"props":540,"children":541},{"class":206,"line":207},[542,546,550,554,558],{"type":148,"tag":204,"props":543,"children":544},{"style":211},[545],{"type":153,"value":214},{"type":148,"tag":204,"props":547,"children":548},{"style":217},[549],{"type":153,"value":220},{"type":148,"tag":204,"props":551,"children":552},{"style":223},[553],{"type":153,"value":226},{"type":148,"tag":204,"props":555,"children":556},{"style":229},[557],{"type":153,"value":232},{"type":148,"tag":204,"props":559,"children":560},{"style":217},[561],{"type":153,"value":237},{"type":148,"tag":204,"props":563,"children":564},{"class":206,"line":240},[565],{"type":148,"tag":204,"props":566,"children":567},{"emptyLinePlaceholder":244},[568],{"type":153,"value":247},{"type":148,"tag":204,"props":570,"children":571},{"class":206,"line":250},[572,576,581,586,590,594,598,603,607,612,616],{"type":148,"tag":204,"props":573,"children":574},{"style":217},[575],{"type":153,"value":185},{"type":148,"tag":204,"props":577,"children":578},{"style":223},[579],{"type":153,"value":580},".",{"type":148,"tag":204,"props":582,"children":583},{"style":229},[584],{"type":153,"value":585},"getSizes",{"type":148,"tag":204,"props":587,"children":588},{"style":217},[589],{"type":153,"value":260},{"type":148,"tag":204,"props":591,"children":592},{"style":223},[593],{"type":153,"value":265},{"type":148,"tag":204,"props":595,"children":596},{"style":223},[597],{"type":153,"value":420},{"type":148,"tag":204,"props":599,"children":600},{"style":217},[601],{"type":153,"value":602}," sizes",{"type":148,"tag":204,"props":604,"children":605},{"style":223},[606],{"type":153,"value":265},{"type":148,"tag":204,"props":608,"children":609},{"style":217},[610],{"type":153,"value":611}," modifiers ",{"type":148,"tag":204,"props":613,"children":614},{"style":223},[615],{"type":153,"value":494},{"type":148,"tag":204,"props":617,"children":618},{"style":217},[619],{"type":153,"value":446},{"type":148,"tag":621,"props":622,"children":623},"callout",{},[624],{"type":148,"tag":149,"props":625,"children":626},{},[627,629,633],{"type":153,"value":628},"Unstable: ",{"type":148,"tag":156,"props":630,"children":631},{"className":136},[632],{"type":153,"value":585},{"type":153,"value":634}," API might change or be removed.",{"type":148,"tag":149,"props":636,"children":637},{},[638],{"type":148,"tag":284,"props":639,"children":640},{},[641],{"type":153,"value":642},"Parameters:",{"type":148,"tag":644,"props":645,"children":646},"ul",{},[647,658,668,726],{"type":148,"tag":648,"props":649,"children":650},"li",{},[651,656],{"type":148,"tag":156,"props":652,"children":653},{"className":136},[654],{"type":153,"value":655},"src",{"type":153,"value":657},": (string) Source to original image id",{"type":148,"tag":648,"props":659,"children":660},{},[661,666],{"type":148,"tag":156,"props":662,"children":663},{"className":136},[664],{"type":153,"value":665},"sizes",{"type":153,"value":667},": (string) List of responsive image sizes ({breakpoint}:{size}{unit})",{"type":148,"tag":648,"props":669,"children":670},{},[671,676,678],{"type":148,"tag":156,"props":672,"children":673},{"className":136},[674],{"type":153,"value":675},"modifiers",{"type":153,"value":677},": (object) Modifiers passed to provider for resizing and optimizing\n",{"type":148,"tag":644,"props":679,"children":680},{},[681,691,701,711,721],{"type":148,"tag":648,"props":682,"children":683},{},[684,689],{"type":148,"tag":156,"props":685,"children":686},{"className":136},[687],{"type":153,"value":688},"width",{"type":153,"value":690},": resize to the specified width (in pixels)",{"type":148,"tag":648,"props":692,"children":693},{},[694,699],{"type":148,"tag":156,"props":695,"children":696},{"className":136},[697],{"type":153,"value":698},"height",{"type":153,"value":700},": resize to specified height (in pixels)",{"type":148,"tag":648,"props":702,"children":703},{},[704,709],{"type":148,"tag":156,"props":705,"children":706},{"className":136},[707],{"type":153,"value":708},"quality",{"type":153,"value":710},": Change image quality (0 to 100)",{"type":148,"tag":648,"props":712,"children":713},{},[714,719],{"type":148,"tag":156,"props":715,"children":716},{"className":136},[717],{"type":153,"value":718},"format",{"type":153,"value":720},": Change the image format",{"type":148,"tag":648,"props":722,"children":723},{},[724],{"type":153,"value":725},"(any other custom provider modifier)",{"type":148,"tag":648,"props":727,"children":728},{},[729,734,736],{"type":148,"tag":156,"props":730,"children":731},{"className":136},[732],{"type":153,"value":733},"options",{"type":153,"value":735},": (object)\n",{"type":148,"tag":644,"props":737,"children":738},{},[739,758],{"type":148,"tag":648,"props":740,"children":741},{},[742,747,749,756],{"type":148,"tag":156,"props":743,"children":744},{"className":136},[745],{"type":153,"value":746},"provider",{"type":153,"value":748},": (string) Provider name other than default (see ",{"type":148,"tag":750,"props":751,"children":753},"a",{"href":752},"/get-started/configuration#providers",[754],{"type":153,"value":755},"providers",{"type":153,"value":757},")",{"type":148,"tag":648,"props":759,"children":760},{},[761,766,768],{"type":148,"tag":156,"props":762,"children":763},{"className":136},[764],{"type":153,"value":765},"preset",{"type":153,"value":767},": Use a ",{"type":148,"tag":750,"props":769,"children":771},{"href":770},"/get-started/configuration#presets",[772],{"type":153,"value":765},{"type":148,"tag":149,"props":774,"children":775},{},[776,780,782],{"type":148,"tag":284,"props":777,"children":778},{},[779],{"type":153,"value":288},{"type":153,"value":781}," Responsive srcset with Vuetify ",{"type":148,"tag":156,"props":783,"children":784},{"className":136},[785],{"type":153,"value":786},"v-img",{"type":148,"tag":194,"props":788,"children":792},{"className":789,"code":790,"language":791,"meta":136,"style":136},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst props = defineProps({\n  height: { type: [Number, String], default: 500 },\n  src: {\n    type: String,\n    default: '/img/header-bg.jpg'\n  }\n})\nconst img = useImage()\nconst _srcset = computed(() => {\n  return img.getSizes(props.src, {\n    sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',\n    modifiers: {\n      format: 'webp',\n      quality: 70,\n      height: props.height\n    }\n  })\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cv-img\n    :lazy-src=\"img(src, { width: 10, quality: 70 })\"\n    :src=\"img(src, { height, quality: 70 })\"\n    :srcset=\"_srcset.srcset\"\n    :height=\"height\"\n    :sizes=\"_srcset.sizes\"\n  >\u003C/v-img>\n\u003C/template>\n","html",[793],{"type":148,"tag":156,"props":794,"children":795},{"__ignoreMap":136},[796,842,872,934,950,972,1000,1009,1021,1045,1082,1127,1157,1174,1204,1226,1253,1262,1275,1287,1304,1312,1329,1343,1370,1396,1422,1447,1473,1490],{"type":148,"tag":204,"props":797,"children":798},{"class":206,"line":207},[799,804,809,814,819,823,828,833,837],{"type":148,"tag":204,"props":800,"children":801},{"style":223},[802],{"type":153,"value":803},"\u003C",{"type":148,"tag":204,"props":805,"children":806},{"style":394},[807],{"type":153,"value":808},"script",{"type":148,"tag":204,"props":810,"children":811},{"style":211},[812],{"type":153,"value":813}," setup",{"type":148,"tag":204,"props":815,"children":816},{"style":211},[817],{"type":153,"value":818}," lang",{"type":148,"tag":204,"props":820,"children":821},{"style":223},[822],{"type":153,"value":226},{"type":148,"tag":204,"props":824,"children":825},{"style":223},[826],{"type":153,"value":827},"\"",{"type":148,"tag":204,"props":829,"children":830},{"style":404},[831],{"type":153,"value":832},"ts",{"type":148,"tag":204,"props":834,"children":835},{"style":223},[836],{"type":153,"value":827},{"type":148,"tag":204,"props":838,"children":839},{"style":223},[840],{"type":153,"value":841},">\n",{"type":148,"tag":204,"props":843,"children":844},{"class":206,"line":240},[845,849,854,858,863,867],{"type":148,"tag":204,"props":846,"children":847},{"style":211},[848],{"type":153,"value":214},{"type":148,"tag":204,"props":850,"children":851},{"style":217},[852],{"type":153,"value":853}," props ",{"type":148,"tag":204,"props":855,"children":856},{"style":223},[857],{"type":153,"value":226},{"type":148,"tag":204,"props":859,"children":860},{"style":229},[861],{"type":153,"value":862}," defineProps",{"type":148,"tag":204,"props":864,"children":865},{"style":217},[866],{"type":153,"value":353},{"type":148,"tag":204,"props":868,"children":869},{"style":223},[870],{"type":153,"value":871},"{\n",{"type":148,"tag":204,"props":873,"children":874},{"class":206,"line":250},[875,880,884,888,893,897,902,906,911,915,920,924,929],{"type":148,"tag":204,"props":876,"children":877},{"style":394},[878],{"type":153,"value":879},"  height",{"type":148,"tag":204,"props":881,"children":882},{"style":223},[883],{"type":153,"value":430},{"type":148,"tag":204,"props":885,"children":886},{"style":223},[887],{"type":153,"value":420},{"type":148,"tag":204,"props":889,"children":890},{"style":394},[891],{"type":153,"value":892}," type",{"type":148,"tag":204,"props":894,"children":895},{"style":223},[896],{"type":153,"value":430},{"type":148,"tag":204,"props":898,"children":899},{"style":217},[900],{"type":153,"value":901}," [Number",{"type":148,"tag":204,"props":903,"children":904},{"style":223},[905],{"type":153,"value":265},{"type":148,"tag":204,"props":907,"children":908},{"style":217},[909],{"type":153,"value":910}," String]",{"type":148,"tag":204,"props":912,"children":913},{"style":223},[914],{"type":153,"value":265},{"type":148,"tag":204,"props":916,"children":917},{"style":394},[918],{"type":153,"value":919}," default",{"type":148,"tag":204,"props":921,"children":922},{"style":223},[923],{"type":153,"value":430},{"type":148,"tag":204,"props":925,"children":926},{"style":433},[927],{"type":153,"value":928}," 500",{"type":148,"tag":204,"props":930,"children":931},{"style":223},[932],{"type":153,"value":933}," },\n",{"type":148,"tag":204,"props":935,"children":936},{"class":206,"line":449},[937,942,946],{"type":148,"tag":204,"props":938,"children":939},{"style":394},[940],{"type":153,"value":941},"  src",{"type":148,"tag":204,"props":943,"children":944},{"style":223},[945],{"type":153,"value":430},{"type":148,"tag":204,"props":947,"children":948},{"style":223},[949],{"type":153,"value":368},{"type":148,"tag":204,"props":951,"children":952},{"class":206,"line":512},[953,958,962,967],{"type":148,"tag":204,"props":954,"children":955},{"style":394},[956],{"type":153,"value":957},"    type",{"type":148,"tag":204,"props":959,"children":960},{"style":223},[961],{"type":153,"value":430},{"type":148,"tag":204,"props":963,"children":964},{"style":217},[965],{"type":153,"value":966}," String",{"type":148,"tag":204,"props":968,"children":969},{"style":223},[970],{"type":153,"value":971},",\n",{"type":148,"tag":204,"props":973,"children":975},{"class":206,"line":974},6,[976,981,985,990,995],{"type":148,"tag":204,"props":977,"children":978},{"style":394},[979],{"type":153,"value":980},"    default",{"type":148,"tag":204,"props":982,"children":983},{"style":223},[984],{"type":153,"value":430},{"type":148,"tag":204,"props":986,"children":987},{"style":223},[988],{"type":153,"value":989}," '",{"type":148,"tag":204,"props":991,"children":992},{"style":404},[993],{"type":153,"value":994},"/img/header-bg.jpg",{"type":148,"tag":204,"props":996,"children":997},{"style":223},[998],{"type":153,"value":999},"'\n",{"type":148,"tag":204,"props":1001,"children":1003},{"class":206,"line":1002},7,[1004],{"type":148,"tag":204,"props":1005,"children":1006},{"style":223},[1007],{"type":153,"value":1008},"  }\n",{"type":148,"tag":204,"props":1010,"children":1012},{"class":206,"line":1011},8,[1013,1017],{"type":148,"tag":204,"props":1014,"children":1015},{"style":223},[1016],{"type":153,"value":494},{"type":148,"tag":204,"props":1018,"children":1019},{"style":217},[1020],{"type":153,"value":446},{"type":148,"tag":204,"props":1022,"children":1024},{"class":206,"line":1023},9,[1025,1029,1033,1037,1041],{"type":148,"tag":204,"props":1026,"children":1027},{"style":211},[1028],{"type":153,"value":214},{"type":148,"tag":204,"props":1030,"children":1031},{"style":217},[1032],{"type":153,"value":220},{"type":148,"tag":204,"props":1034,"children":1035},{"style":223},[1036],{"type":153,"value":226},{"type":148,"tag":204,"props":1038,"children":1039},{"style":229},[1040],{"type":153,"value":232},{"type":148,"tag":204,"props":1042,"children":1043},{"style":217},[1044],{"type":153,"value":237},{"type":148,"tag":204,"props":1046,"children":1048},{"class":206,"line":1047},10,[1049,1053,1058,1062,1066,1070,1074,1078],{"type":148,"tag":204,"props":1050,"children":1051},{"style":211},[1052],{"type":153,"value":214},{"type":148,"tag":204,"props":1054,"children":1055},{"style":217},[1056],{"type":153,"value":1057}," _srcset ",{"type":148,"tag":204,"props":1059,"children":1060},{"style":223},[1061],{"type":153,"value":226},{"type":148,"tag":204,"props":1063,"children":1064},{"style":229},[1065],{"type":153,"value":348},{"type":148,"tag":204,"props":1067,"children":1068},{"style":217},[1069],{"type":153,"value":353},{"type":148,"tag":204,"props":1071,"children":1072},{"style":223},[1073],{"type":153,"value":358},{"type":148,"tag":204,"props":1075,"children":1076},{"style":211},[1077],{"type":153,"value":363},{"type":148,"tag":204,"props":1079,"children":1080},{"style":223},[1081],{"type":153,"value":368},{"type":148,"tag":204,"props":1083,"children":1085},{"class":206,"line":1084},11,[1086,1090,1094,1098,1102,1106,1111,1115,1119,1123],{"type":148,"tag":204,"props":1087,"children":1088},{"style":453},[1089],{"type":153,"value":456},{"type":148,"tag":204,"props":1091,"children":1092},{"style":217},[1093],{"type":153,"value":391},{"type":148,"tag":204,"props":1095,"children":1096},{"style":223},[1097],{"type":153,"value":580},{"type":148,"tag":204,"props":1099,"children":1100},{"style":229},[1101],{"type":153,"value":585},{"type":148,"tag":204,"props":1103,"children":1104},{"style":394},[1105],{"type":153,"value":353},{"type":148,"tag":204,"props":1107,"children":1108},{"style":217},[1109],{"type":153,"value":1110},"props",{"type":148,"tag":204,"props":1112,"children":1113},{"style":223},[1114],{"type":153,"value":580},{"type":148,"tag":204,"props":1116,"children":1117},{"style":217},[1118],{"type":153,"value":655},{"type":148,"tag":204,"props":1120,"children":1121},{"style":223},[1122],{"type":153,"value":265},{"type":148,"tag":204,"props":1124,"children":1125},{"style":223},[1126],{"type":153,"value":368},{"type":148,"tag":204,"props":1128,"children":1130},{"class":206,"line":1129},12,[1131,1136,1140,1144,1149,1153],{"type":148,"tag":204,"props":1132,"children":1133},{"style":394},[1134],{"type":153,"value":1135},"    sizes",{"type":148,"tag":204,"props":1137,"children":1138},{"style":223},[1139],{"type":153,"value":430},{"type":148,"tag":204,"props":1141,"children":1142},{"style":223},[1143],{"type":153,"value":989},{"type":148,"tag":204,"props":1145,"children":1146},{"style":404},[1147],{"type":153,"value":1148},"xs:100vw sm:100vw md:100vw lg:100vw xl:100vw",{"type":148,"tag":204,"props":1150,"children":1151},{"style":223},[1152],{"type":153,"value":401},{"type":148,"tag":204,"props":1154,"children":1155},{"style":223},[1156],{"type":153,"value":971},{"type":148,"tag":204,"props":1158,"children":1160},{"class":206,"line":1159},13,[1161,1166,1170],{"type":148,"tag":204,"props":1162,"children":1163},{"style":394},[1164],{"type":153,"value":1165},"    modifiers",{"type":148,"tag":204,"props":1167,"children":1168},{"style":223},[1169],{"type":153,"value":430},{"type":148,"tag":204,"props":1171,"children":1172},{"style":223},[1173],{"type":153,"value":368},{"type":148,"tag":204,"props":1175,"children":1177},{"class":206,"line":1176},14,[1178,1183,1187,1191,1196,1200],{"type":148,"tag":204,"props":1179,"children":1180},{"style":394},[1181],{"type":153,"value":1182},"      format",{"type":148,"tag":204,"props":1184,"children":1185},{"style":223},[1186],{"type":153,"value":430},{"type":148,"tag":204,"props":1188,"children":1189},{"style":223},[1190],{"type":153,"value":989},{"type":148,"tag":204,"props":1192,"children":1193},{"style":404},[1194],{"type":153,"value":1195},"webp",{"type":148,"tag":204,"props":1197,"children":1198},{"style":223},[1199],{"type":153,"value":401},{"type":148,"tag":204,"props":1201,"children":1202},{"style":223},[1203],{"type":153,"value":971},{"type":148,"tag":204,"props":1205,"children":1207},{"class":206,"line":1206},15,[1208,1213,1217,1222],{"type":148,"tag":204,"props":1209,"children":1210},{"style":394},[1211],{"type":153,"value":1212},"      quality",{"type":148,"tag":204,"props":1214,"children":1215},{"style":223},[1216],{"type":153,"value":430},{"type":148,"tag":204,"props":1218,"children":1219},{"style":433},[1220],{"type":153,"value":1221}," 70",{"type":148,"tag":204,"props":1223,"children":1224},{"style":223},[1225],{"type":153,"value":971},{"type":148,"tag":204,"props":1227,"children":1229},{"class":206,"line":1228},16,[1230,1235,1239,1244,1248],{"type":148,"tag":204,"props":1231,"children":1232},{"style":394},[1233],{"type":153,"value":1234},"      height",{"type":148,"tag":204,"props":1236,"children":1237},{"style":223},[1238],{"type":153,"value":430},{"type":148,"tag":204,"props":1240,"children":1241},{"style":217},[1242],{"type":153,"value":1243}," props",{"type":148,"tag":204,"props":1245,"children":1246},{"style":223},[1247],{"type":153,"value":580},{"type":148,"tag":204,"props":1249,"children":1250},{"style":217},[1251],{"type":153,"value":1252},"height\n",{"type":148,"tag":204,"props":1254,"children":1256},{"class":206,"line":1255},17,[1257],{"type":148,"tag":204,"props":1258,"children":1259},{"style":223},[1260],{"type":153,"value":1261},"    }\n",{"type":148,"tag":204,"props":1263,"children":1265},{"class":206,"line":1264},18,[1266,1271],{"type":148,"tag":204,"props":1267,"children":1268},{"style":223},[1269],{"type":153,"value":1270},"  }",{"type":148,"tag":204,"props":1272,"children":1273},{"style":394},[1274],{"type":153,"value":446},{"type":148,"tag":204,"props":1276,"children":1278},{"class":206,"line":1277},19,[1279,1283],{"type":148,"tag":204,"props":1280,"children":1281},{"style":223},[1282],{"type":153,"value":494},{"type":148,"tag":204,"props":1284,"children":1285},{"style":217},[1286],{"type":153,"value":446},{"type":148,"tag":204,"props":1288,"children":1290},{"class":206,"line":1289},20,[1291,1296,1300],{"type":148,"tag":204,"props":1292,"children":1293},{"style":223},[1294],{"type":153,"value":1295},"\u003C/",{"type":148,"tag":204,"props":1297,"children":1298},{"style":394},[1299],{"type":153,"value":808},{"type":148,"tag":204,"props":1301,"children":1302},{"style":223},[1303],{"type":153,"value":841},{"type":148,"tag":204,"props":1305,"children":1307},{"class":206,"line":1306},21,[1308],{"type":148,"tag":204,"props":1309,"children":1310},{"emptyLinePlaceholder":244},[1311],{"type":153,"value":247},{"type":148,"tag":204,"props":1313,"children":1315},{"class":206,"line":1314},22,[1316,1320,1325],{"type":148,"tag":204,"props":1317,"children":1318},{"style":223},[1319],{"type":153,"value":803},{"type":148,"tag":204,"props":1321,"children":1322},{"style":394},[1323],{"type":153,"value":1324},"template",{"type":148,"tag":204,"props":1326,"children":1327},{"style":223},[1328],{"type":153,"value":841},{"type":148,"tag":204,"props":1330,"children":1332},{"class":206,"line":1331},23,[1333,1338],{"type":148,"tag":204,"props":1334,"children":1335},{"style":223},[1336],{"type":153,"value":1337},"  \u003C",{"type":148,"tag":204,"props":1339,"children":1340},{"style":394},[1341],{"type":153,"value":1342},"v-img\n",{"type":148,"tag":204,"props":1344,"children":1346},{"class":206,"line":1345},24,[1347,1352,1356,1360,1365],{"type":148,"tag":204,"props":1348,"children":1349},{"style":211},[1350],{"type":153,"value":1351},"    :lazy-src",{"type":148,"tag":204,"props":1353,"children":1354},{"style":223},[1355],{"type":153,"value":226},{"type":148,"tag":204,"props":1357,"children":1358},{"style":223},[1359],{"type":153,"value":827},{"type":148,"tag":204,"props":1361,"children":1362},{"style":404},[1363],{"type":153,"value":1364},"img(src, { width: 10, quality: 70 })",{"type":148,"tag":204,"props":1366,"children":1367},{"style":223},[1368],{"type":153,"value":1369},"\"\n",{"type":148,"tag":204,"props":1371,"children":1373},{"class":206,"line":1372},25,[1374,1379,1383,1387,1392],{"type":148,"tag":204,"props":1375,"children":1376},{"style":211},[1377],{"type":153,"value":1378},"    :src",{"type":148,"tag":204,"props":1380,"children":1381},{"style":223},[1382],{"type":153,"value":226},{"type":148,"tag":204,"props":1384,"children":1385},{"style":223},[1386],{"type":153,"value":827},{"type":148,"tag":204,"props":1388,"children":1389},{"style":404},[1390],{"type":153,"value":1391},"img(src, { height, quality: 70 })",{"type":148,"tag":204,"props":1393,"children":1394},{"style":223},[1395],{"type":153,"value":1369},{"type":148,"tag":204,"props":1397,"children":1399},{"class":206,"line":1398},26,[1400,1405,1409,1413,1418],{"type":148,"tag":204,"props":1401,"children":1402},{"style":211},[1403],{"type":153,"value":1404},"    :srcset",{"type":148,"tag":204,"props":1406,"children":1407},{"style":223},[1408],{"type":153,"value":226},{"type":148,"tag":204,"props":1410,"children":1411},{"style":223},[1412],{"type":153,"value":827},{"type":148,"tag":204,"props":1414,"children":1415},{"style":404},[1416],{"type":153,"value":1417},"_srcset.srcset",{"type":148,"tag":204,"props":1419,"children":1420},{"style":223},[1421],{"type":153,"value":1369},{"type":148,"tag":204,"props":1423,"children":1425},{"class":206,"line":1424},27,[1426,1431,1435,1439,1443],{"type":148,"tag":204,"props":1427,"children":1428},{"style":211},[1429],{"type":153,"value":1430},"    :height",{"type":148,"tag":204,"props":1432,"children":1433},{"style":223},[1434],{"type":153,"value":226},{"type":148,"tag":204,"props":1436,"children":1437},{"style":223},[1438],{"type":153,"value":827},{"type":148,"tag":204,"props":1440,"children":1441},{"style":404},[1442],{"type":153,"value":698},{"type":148,"tag":204,"props":1444,"children":1445},{"style":223},[1446],{"type":153,"value":1369},{"type":148,"tag":204,"props":1448,"children":1450},{"class":206,"line":1449},28,[1451,1456,1460,1464,1469],{"type":148,"tag":204,"props":1452,"children":1453},{"style":211},[1454],{"type":153,"value":1455},"    :sizes",{"type":148,"tag":204,"props":1457,"children":1458},{"style":223},[1459],{"type":153,"value":226},{"type":148,"tag":204,"props":1461,"children":1462},{"style":223},[1463],{"type":153,"value":827},{"type":148,"tag":204,"props":1465,"children":1466},{"style":404},[1467],{"type":153,"value":1468},"_srcset.sizes",{"type":148,"tag":204,"props":1470,"children":1471},{"style":223},[1472],{"type":153,"value":1369},{"type":148,"tag":204,"props":1474,"children":1476},{"class":206,"line":1475},29,[1477,1482,1486],{"type":148,"tag":204,"props":1478,"children":1479},{"style":223},[1480],{"type":153,"value":1481},"  >\u003C/",{"type":148,"tag":204,"props":1483,"children":1484},{"style":394},[1485],{"type":153,"value":786},{"type":148,"tag":204,"props":1487,"children":1488},{"style":223},[1489],{"type":153,"value":841},{"type":148,"tag":204,"props":1491,"children":1493},{"class":206,"line":1492},30,[1494,1498,1502],{"type":148,"tag":204,"props":1495,"children":1496},{"style":223},[1497],{"type":153,"value":1295},{"type":148,"tag":204,"props":1499,"children":1500},{"style":394},[1501],{"type":153,"value":1324},{"type":148,"tag":204,"props":1503,"children":1504},{"style":223},[1505],{"type":153,"value":841},{"type":148,"tag":1507,"props":1508,"children":1509},"style",{},[1510],{"type":153,"value":1511},"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":136,"searchDepth":240,"depth":240,"links":1513},[1514],{"id":134,"depth":240,"text":21,"children":1515},[1516],{"id":525,"depth":250,"text":531},"markdown","content:2.usage:3.use-image.md","content","2.usage/3.use-image.md","md",[1523,1908],{"_path":29,"_dir":134,"_draft":135,"_partial":135,"_locale":136,"title":28,"description":1524,"links":1525,"body":1528,"_type":1517,"_id":1906,"_source":1519,"_file":1907,"_extension":1521},"Discover how to use and configure the Nuxt Picture component.",[1526],{"label":140,"icon":141,"to":1527,"size":143},"https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-picture.ts",{"type":145,"children":1529,"toc":1899},[1530,1546,1573,1591,1596,1612,1619,1624,1697,1739,1748,1753,1793,1802,1813,1820,1895],{"type":148,"tag":149,"props":1531,"children":1532},{},[1533,1537,1539,1544],{"type":148,"tag":156,"props":1534,"children":1535},{"className":136},[1536],{"type":153,"value":28},{"type":153,"value":1538}," is a drop-in replacement for the native ",{"type":148,"tag":156,"props":1540,"children":1541},{"className":136},[1542],{"type":153,"value":1543},"\u003Cpicture>",{"type":153,"value":1545}," tag.",{"type":148,"tag":149,"props":1547,"children":1548},{},[1549,1551,1555,1557,1565,1567,1571],{"type":153,"value":1550},"Usage of ",{"type":148,"tag":156,"props":1552,"children":1553},{"className":136},[1554],{"type":153,"value":28},{"type":153,"value":1556}," is almost identical to ",{"type":148,"tag":750,"props":1558,"children":1560},{"href":1559},"nuxt-img",[1561],{"type":148,"tag":156,"props":1562,"children":1563},{"className":136},[1564],{"type":153,"value":25},{"type":153,"value":1566}," but also allows serving modern formats like ",{"type":148,"tag":156,"props":1568,"children":1569},{"className":136},[1570],{"type":153,"value":1195},{"type":153,"value":1572}," when possible.",{"type":148,"tag":149,"props":1574,"children":1575},{},[1576,1578,1590],{"type":153,"value":1577},"Learn more about the ",{"type":148,"tag":750,"props":1579,"children":1583},{"href":1580,"rel":1581},"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture",[1582],"nofollow",[1584,1588],{"type":148,"tag":156,"props":1585,"children":1586},{"className":136},[1587],{"type":153,"value":1543},{"type":153,"value":1589}," tag on MDN",{"type":153,"value":580},{"type":148,"tag":189,"props":1592,"children":1593},{"id":1110},[1594],{"type":153,"value":1595},"Props",{"type":148,"tag":621,"props":1597,"children":1598},{},[1599],{"type":148,"tag":149,"props":1600,"children":1601},{},[1602,1604],{"type":153,"value":1603},"See props supported by",{"type":148,"tag":750,"props":1605,"children":1607},{"href":1606},"/usage/nuxt-img#props",[1608],{"type":148,"tag":156,"props":1609,"children":1610},{"className":136},[1611],{"type":153,"value":25},{"type":148,"tag":523,"props":1613,"children":1614},{"id":718},[1615],{"type":148,"tag":156,"props":1616,"children":1617},{"className":136},[1618],{"type":153,"value":718},{"type":148,"tag":149,"props":1620,"children":1621},{},[1622],{"type":153,"value":1623},"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":148,"tag":194,"props":1625,"children":1627},{"className":789,"code":1626,"language":791,"meta":136,"style":136},"\u003CNuxtPicture format=\"avif,webp\" src=\"/nuxt-icon.png\" ... />\n",[1628],{"type":148,"tag":156,"props":1629,"children":1630},{"__ignoreMap":136},[1631],{"type":148,"tag":204,"props":1632,"children":1633},{"class":206,"line":207},[1634,1638,1643,1648,1652,1656,1661,1665,1670,1674,1678,1683,1687,1692],{"type":148,"tag":204,"props":1635,"children":1636},{"style":223},[1637],{"type":153,"value":803},{"type":148,"tag":204,"props":1639,"children":1640},{"style":394},[1641],{"type":153,"value":1642},"NuxtPicture",{"type":148,"tag":204,"props":1644,"children":1645},{"style":211},[1646],{"type":153,"value":1647}," format",{"type":148,"tag":204,"props":1649,"children":1650},{"style":223},[1651],{"type":153,"value":226},{"type":148,"tag":204,"props":1653,"children":1654},{"style":223},[1655],{"type":153,"value":827},{"type":148,"tag":204,"props":1657,"children":1658},{"style":404},[1659],{"type":153,"value":1660},"avif,webp",{"type":148,"tag":204,"props":1662,"children":1663},{"style":223},[1664],{"type":153,"value":827},{"type":148,"tag":204,"props":1666,"children":1667},{"style":211},[1668],{"type":153,"value":1669}," src",{"type":148,"tag":204,"props":1671,"children":1672},{"style":223},[1673],{"type":153,"value":226},{"type":148,"tag":204,"props":1675,"children":1676},{"style":223},[1677],{"type":153,"value":827},{"type":148,"tag":204,"props":1679,"children":1680},{"style":404},[1681],{"type":153,"value":1682},"/nuxt-icon.png",{"type":148,"tag":204,"props":1684,"children":1685},{"style":223},[1686],{"type":153,"value":827},{"type":148,"tag":204,"props":1688,"children":1689},{"style":211},[1690],{"type":153,"value":1691}," ...",{"type":148,"tag":204,"props":1693,"children":1694},{"style":223},[1695],{"type":153,"value":1696}," />\n",{"type":148,"tag":149,"props":1698,"children":1699},{},[1700,1702,1706,1708,1713,1714,1719,1720,1725,1726,1731,1732,1737],{"type":153,"value":1701},"Available formats are ",{"type":148,"tag":156,"props":1703,"children":1704},{"className":136},[1705],{"type":153,"value":1195},{"type":153,"value":1707},", ",{"type":148,"tag":156,"props":1709,"children":1710},{"className":136},[1711],{"type":153,"value":1712},"avif",{"type":153,"value":1707},{"type":148,"tag":156,"props":1715,"children":1716},{"className":136},[1717],{"type":153,"value":1718},"jpeg",{"type":153,"value":1707},{"type":148,"tag":156,"props":1721,"children":1722},{"className":136},[1723],{"type":153,"value":1724},"jpg",{"type":153,"value":1707},{"type":148,"tag":156,"props":1727,"children":1728},{"className":136},[1729],{"type":153,"value":1730},"png",{"type":153,"value":161},{"type":148,"tag":156,"props":1733,"children":1734},{"className":136},[1735],{"type":153,"value":1736},"gif",{"type":153,"value":1738},". If the format is not specified, it will respect the default image format.",{"type":148,"tag":523,"props":1740,"children":1742},{"id":1741},"legacyformat",[1743],{"type":148,"tag":156,"props":1744,"children":1745},{"className":136},[1746],{"type":153,"value":1747},"legacyFormat",{"type":148,"tag":149,"props":1749,"children":1750},{},[1751],{"type":153,"value":1752},"Format used for fallback. Default is conditional:",{"type":148,"tag":644,"props":1754,"children":1755},{},[1756,1783],{"type":148,"tag":648,"props":1757,"children":1758},{},[1759,1761,1765,1766,1770,1771,1775,1777,1781],{"type":153,"value":1760},"If original format supports transparency (",{"type":148,"tag":156,"props":1762,"children":1763},{"className":136},[1764],{"type":153,"value":1730},{"type":153,"value":1707},{"type":148,"tag":156,"props":1767,"children":1768},{"className":136},[1769],{"type":153,"value":1195},{"type":153,"value":161},{"type":148,"tag":156,"props":1772,"children":1773},{"className":136},[1774],{"type":153,"value":1736},{"type":153,"value":1776},"), ",{"type":148,"tag":156,"props":1778,"children":1779},{"className":136},[1780],{"type":153,"value":1730},{"type":153,"value":1782}," is used for fallback",{"type":148,"tag":648,"props":1784,"children":1785},{},[1786,1788,1792],{"type":153,"value":1787},"Otherwise ",{"type":148,"tag":156,"props":1789,"children":1790},{"className":136},[1791],{"type":153,"value":1718},{"type":153,"value":1782},{"type":148,"tag":523,"props":1794,"children":1796},{"id":1795},"imgattrs",[1797],{"type":148,"tag":156,"props":1798,"children":1799},{"className":136},[1800],{"type":153,"value":1801},"imgAttrs",{"type":148,"tag":149,"props":1803,"children":1804},{},[1805,1807,1811],{"type":153,"value":1806},"Allows you to set additional HTML-attributes on the ",{"type":148,"tag":156,"props":1808,"children":1809},{"className":136},[1810],{"type":153,"value":185},{"type":153,"value":1812}," element.",{"type":148,"tag":149,"props":1814,"children":1815},{},[1816],{"type":148,"tag":284,"props":1817,"children":1818},{},[1819],{"type":153,"value":288},{"type":148,"tag":194,"props":1821,"children":1823},{"className":789,"code":1822,"language":791,"meta":136,"style":136},"\u003CNuxtPicture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\"\n/>\n",[1824],{"type":148,"tag":156,"props":1825,"children":1826},{"__ignoreMap":136},[1827,1839,1862,1887],{"type":148,"tag":204,"props":1828,"children":1829},{"class":206,"line":207},[1830,1834],{"type":148,"tag":204,"props":1831,"children":1832},{"style":223},[1833],{"type":153,"value":803},{"type":148,"tag":204,"props":1835,"children":1836},{"style":394},[1837],{"type":153,"value":1838},"NuxtPicture\n",{"type":148,"tag":204,"props":1840,"children":1841},{"class":206,"line":240},[1842,1846,1850,1854,1858],{"type":148,"tag":204,"props":1843,"children":1844},{"style":211},[1845],{"type":153,"value":941},{"type":148,"tag":204,"props":1847,"children":1848},{"style":223},[1849],{"type":153,"value":226},{"type":148,"tag":204,"props":1851,"children":1852},{"style":223},[1853],{"type":153,"value":827},{"type":148,"tag":204,"props":1855,"children":1856},{"style":404},[1857],{"type":153,"value":1682},{"type":148,"tag":204,"props":1859,"children":1860},{"style":223},[1861],{"type":153,"value":1369},{"type":148,"tag":204,"props":1863,"children":1864},{"class":206,"line":250},[1865,1870,1874,1878,1883],{"type":148,"tag":204,"props":1866,"children":1867},{"style":211},[1868],{"type":153,"value":1869},"  :imgAttrs",{"type":148,"tag":204,"props":1871,"children":1872},{"style":223},[1873],{"type":153,"value":226},{"type":148,"tag":204,"props":1875,"children":1876},{"style":223},[1877],{"type":153,"value":827},{"type":148,"tag":204,"props":1879,"children":1880},{"style":404},[1881],{"type":153,"value":1882},"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}",{"type":148,"tag":204,"props":1884,"children":1885},{"style":223},[1886],{"type":153,"value":1369},{"type":148,"tag":204,"props":1888,"children":1889},{"class":206,"line":449},[1890],{"type":148,"tag":204,"props":1891,"children":1892},{"style":223},[1893],{"type":153,"value":1894},"/>\n",{"type":148,"tag":1507,"props":1896,"children":1897},{},[1898],{"type":153,"value":1511},{"title":136,"searchDepth":240,"depth":240,"links":1900},[1901],{"id":1110,"depth":240,"text":1595,"children":1902},[1903,1904,1905],{"id":718,"depth":250,"text":718},{"id":1741,"depth":250,"text":1747},{"id":1795,"depth":250,"text":1801},"content:2.usage:2.nuxt-picture.md","2.usage/2.nuxt-picture.md",{"_path":38,"_dir":755,"_draft":135,"_partial":135,"_locale":136,"title":37,"description":1909,"links":1910,"body":1913,"_type":1517,"_id":2417,"_source":1519,"_file":2418,"_extension":1521},"Nuxt Image has first class integration with Aliyun.",[1911],{"label":140,"icon":141,"to":1912,"size":143},"https://github.com/nuxt/image/blob/main/src/runtime/providers/aliyun.ts",{"type":145,"children":1914,"toc":2411},[1915,1929,1934,2062,2069,2226,2231,2240,2250,2255,2259,2266,2395,2407],{"type":148,"tag":149,"props":1916,"children":1917},{},[1918,1920,1927],{"type":153,"value":1919},"Integration between ",{"type":148,"tag":750,"props":1921,"children":1924},{"href":1922,"rel":1923},"https://cdn.console.aliyun.com/",[1582],[1925],{"type":153,"value":1926},"Aliyun CDN",{"type":153,"value":1928}," and the image module.",{"type":148,"tag":149,"props":1930,"children":1931},{},[1932],{"type":153,"value":1933},"To use this provider you just need to specify the base url (zone) of your service:",{"type":148,"tag":194,"props":1935,"children":1939},{"className":1936,"code":1937,"filename":1938,"language":832,"meta":136,"style":136},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    aliyun: {\n      baseURL: \"https://that-test.site\",\n    },\n  },\n});\n","nuxt.config.ts",[1940],{"type":148,"tag":156,"props":1941,"children":1942},{"__ignoreMap":136},[1943,1968,1984,2000,2030,2038,2046],{"type":148,"tag":204,"props":1944,"children":1945},{"class":206,"line":207},[1946,1951,1955,1960,1964],{"type":148,"tag":204,"props":1947,"children":1948},{"style":453},[1949],{"type":153,"value":1950},"export",{"type":148,"tag":204,"props":1952,"children":1953},{"style":453},[1954],{"type":153,"value":919},{"type":148,"tag":204,"props":1956,"children":1957},{"style":229},[1958],{"type":153,"value":1959}," defineNuxtConfig",{"type":148,"tag":204,"props":1961,"children":1962},{"style":217},[1963],{"type":153,"value":353},{"type":148,"tag":204,"props":1965,"children":1966},{"style":223},[1967],{"type":153,"value":871},{"type":148,"tag":204,"props":1969,"children":1970},{"class":206,"line":240},[1971,1976,1980],{"type":148,"tag":204,"props":1972,"children":1973},{"style":394},[1974],{"type":153,"value":1975},"  image",{"type":148,"tag":204,"props":1977,"children":1978},{"style":223},[1979],{"type":153,"value":430},{"type":148,"tag":204,"props":1981,"children":1982},{"style":223},[1983],{"type":153,"value":368},{"type":148,"tag":204,"props":1985,"children":1986},{"class":206,"line":250},[1987,1992,1996],{"type":148,"tag":204,"props":1988,"children":1989},{"style":394},[1990],{"type":153,"value":1991},"    aliyun",{"type":148,"tag":204,"props":1993,"children":1994},{"style":223},[1995],{"type":153,"value":430},{"type":148,"tag":204,"props":1997,"children":1998},{"style":223},[1999],{"type":153,"value":368},{"type":148,"tag":204,"props":2001,"children":2002},{"class":206,"line":449},[2003,2008,2012,2017,2022,2026],{"type":148,"tag":204,"props":2004,"children":2005},{"style":394},[2006],{"type":153,"value":2007},"      baseURL",{"type":148,"tag":204,"props":2009,"children":2010},{"style":223},[2011],{"type":153,"value":430},{"type":148,"tag":204,"props":2013,"children":2014},{"style":223},[2015],{"type":153,"value":2016}," \"",{"type":148,"tag":204,"props":2018,"children":2019},{"style":404},[2020],{"type":153,"value":2021},"https://that-test.site",{"type":148,"tag":204,"props":2023,"children":2024},{"style":223},[2025],{"type":153,"value":827},{"type":148,"tag":204,"props":2027,"children":2028},{"style":223},[2029],{"type":153,"value":971},{"type":148,"tag":204,"props":2031,"children":2032},{"class":206,"line":512},[2033],{"type":148,"tag":204,"props":2034,"children":2035},{"style":223},[2036],{"type":153,"value":2037},"    },\n",{"type":148,"tag":204,"props":2039,"children":2040},{"class":206,"line":974},[2041],{"type":148,"tag":204,"props":2042,"children":2043},{"style":223},[2044],{"type":153,"value":2045},"  },\n",{"type":148,"tag":204,"props":2047,"children":2048},{"class":206,"line":1002},[2049,2053,2057],{"type":148,"tag":204,"props":2050,"children":2051},{"style":223},[2052],{"type":153,"value":494},{"type":148,"tag":204,"props":2054,"children":2055},{"style":217},[2056],{"type":153,"value":757},{"type":148,"tag":204,"props":2058,"children":2059},{"style":223},[2060],{"type":153,"value":2061},";\n",{"type":148,"tag":149,"props":2063,"children":2064},{},[2065],{"type":148,"tag":284,"props":2066,"children":2067},{},[2068],{"type":153,"value":288},{"type":148,"tag":194,"props":2070,"children":2074},{"className":2071,"code":2072,"language":2073,"meta":136,"style":136},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"aliyun\"\n  src=\"/burger.jpeg\"\n  height=\"300\"\n  :modifiers=\"{ fit: 'contain' }\"\n/>\n","vue",[2075],{"type":148,"tag":156,"props":2076,"children":2077},{"__ignoreMap":136},[2078,2090,2115,2139,2163,2219],{"type":148,"tag":204,"props":2079,"children":2080},{"class":206,"line":207},[2081,2085],{"type":148,"tag":204,"props":2082,"children":2083},{"style":223},[2084],{"type":153,"value":803},{"type":148,"tag":204,"props":2086,"children":2087},{"style":394},[2088],{"type":153,"value":2089},"NuxtImg\n",{"type":148,"tag":204,"props":2091,"children":2092},{"class":206,"line":240},[2093,2098,2102,2106,2111],{"type":148,"tag":204,"props":2094,"children":2095},{"style":211},[2096],{"type":153,"value":2097},"  provider",{"type":148,"tag":204,"props":2099,"children":2100},{"style":223},[2101],{"type":153,"value":226},{"type":148,"tag":204,"props":2103,"children":2104},{"style":223},[2105],{"type":153,"value":827},{"type":148,"tag":204,"props":2107,"children":2108},{"style":404},[2109],{"type":153,"value":2110},"aliyun",{"type":148,"tag":204,"props":2112,"children":2113},{"style":223},[2114],{"type":153,"value":1369},{"type":148,"tag":204,"props":2116,"children":2117},{"class":206,"line":250},[2118,2122,2126,2130,2135],{"type":148,"tag":204,"props":2119,"children":2120},{"style":211},[2121],{"type":153,"value":941},{"type":148,"tag":204,"props":2123,"children":2124},{"style":223},[2125],{"type":153,"value":226},{"type":148,"tag":204,"props":2127,"children":2128},{"style":223},[2129],{"type":153,"value":827},{"type":148,"tag":204,"props":2131,"children":2132},{"style":404},[2133],{"type":153,"value":2134},"/burger.jpeg",{"type":148,"tag":204,"props":2136,"children":2137},{"style":223},[2138],{"type":153,"value":1369},{"type":148,"tag":204,"props":2140,"children":2141},{"class":206,"line":449},[2142,2146,2150,2154,2159],{"type":148,"tag":204,"props":2143,"children":2144},{"style":211},[2145],{"type":153,"value":879},{"type":148,"tag":204,"props":2147,"children":2148},{"style":223},[2149],{"type":153,"value":226},{"type":148,"tag":204,"props":2151,"children":2152},{"style":223},[2153],{"type":153,"value":827},{"type":148,"tag":204,"props":2155,"children":2156},{"style":404},[2157],{"type":153,"value":2158},"300",{"type":148,"tag":204,"props":2160,"children":2161},{"style":223},[2162],{"type":153,"value":1369},{"type":148,"tag":204,"props":2164,"children":2165},{"class":206,"line":512},[2166,2171,2175,2179,2183,2188,2194,2198,2202,2207,2211,2215],{"type":148,"tag":204,"props":2167,"children":2168},{"style":223},[2169],{"type":153,"value":2170},"  :",{"type":148,"tag":204,"props":2172,"children":2173},{"style":211},[2174],{"type":153,"value":675},{"type":148,"tag":204,"props":2176,"children":2177},{"style":223},[2178],{"type":153,"value":226},{"type":148,"tag":204,"props":2180,"children":2181},{"style":223},[2182],{"type":153,"value":827},{"type":148,"tag":204,"props":2184,"children":2185},{"style":223},[2186],{"type":153,"value":2187},"{",{"type":148,"tag":204,"props":2189,"children":2191},{"style":2190},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[2192],{"type":153,"value":2193}," fit",{"type":148,"tag":204,"props":2195,"children":2196},{"style":223},[2197],{"type":153,"value":430},{"type":148,"tag":204,"props":2199,"children":2200},{"style":223},[2201],{"type":153,"value":989},{"type":148,"tag":204,"props":2203,"children":2204},{"style":404},[2205],{"type":153,"value":2206},"contain",{"type":148,"tag":204,"props":2208,"children":2209},{"style":223},[2210],{"type":153,"value":401},{"type":148,"tag":204,"props":2212,"children":2213},{"style":223},[2214],{"type":153,"value":441},{"type":148,"tag":204,"props":2216,"children":2217},{"style":223},[2218],{"type":153,"value":1369},{"type":148,"tag":204,"props":2220,"children":2221},{"class":206,"line":974},[2222],{"type":148,"tag":204,"props":2223,"children":2224},{"style":217},[2225],{"type":153,"value":1894},{"type":148,"tag":189,"props":2227,"children":2228},{"id":733},[2229],{"type":153,"value":2230},"Options",{"type":148,"tag":523,"props":2232,"children":2234},{"id":2233},"baseurl",[2235],{"type":148,"tag":156,"props":2236,"children":2237},{"className":136},[2238],{"type":153,"value":2239},"baseURL",{"type":148,"tag":149,"props":2241,"children":2242},{},[2243,2245],{"type":153,"value":2244},"Default: ",{"type":148,"tag":156,"props":2246,"children":2247},{"className":136},[2248],{"type":153,"value":2249},"/",{"type":148,"tag":149,"props":2251,"children":2252},{},[2253],{"type":153,"value":2254},"Your deployment's domain (zone).",{"type":148,"tag":189,"props":2256,"children":2257},{"id":675},[2258],{"type":153,"value":675},{"type":148,"tag":149,"props":2260,"children":2261},{},[2262],{"type":148,"tag":284,"props":2263,"children":2264},{},[2265],{"type":153,"value":288},{"type":148,"tag":194,"props":2267,"children":2269},{"className":196,"code":2268,"language":198,"meta":136,"style":136},"{\n  resize: {\n    fw: 900,\n    fh: 200\n  },\n  rotate:180,\n  bright:50\n  ...\n}\n",[2270],{"type":148,"tag":156,"props":2271,"children":2272},{"__ignoreMap":136},[2273,2280,2296,2317,2334,2341,2362,2379,2387],{"type":148,"tag":204,"props":2274,"children":2275},{"class":206,"line":207},[2276],{"type":148,"tag":204,"props":2277,"children":2278},{"style":223},[2279],{"type":153,"value":871},{"type":148,"tag":204,"props":2281,"children":2282},{"class":206,"line":240},[2283,2288,2292],{"type":148,"tag":204,"props":2284,"children":2285},{"style":2190},[2286],{"type":153,"value":2287},"  resize",{"type":148,"tag":204,"props":2289,"children":2290},{"style":223},[2291],{"type":153,"value":430},{"type":148,"tag":204,"props":2293,"children":2294},{"style":223},[2295],{"type":153,"value":368},{"type":148,"tag":204,"props":2297,"children":2298},{"class":206,"line":250},[2299,2304,2308,2313],{"type":148,"tag":204,"props":2300,"children":2301},{"style":2190},[2302],{"type":153,"value":2303},"    fw",{"type":148,"tag":204,"props":2305,"children":2306},{"style":223},[2307],{"type":153,"value":430},{"type":148,"tag":204,"props":2309,"children":2310},{"style":433},[2311],{"type":153,"value":2312}," 900",{"type":148,"tag":204,"props":2314,"children":2315},{"style":223},[2316],{"type":153,"value":971},{"type":148,"tag":204,"props":2318,"children":2319},{"class":206,"line":449},[2320,2325,2329],{"type":148,"tag":204,"props":2321,"children":2322},{"style":2190},[2323],{"type":153,"value":2324},"    fh",{"type":148,"tag":204,"props":2326,"children":2327},{"style":223},[2328],{"type":153,"value":430},{"type":148,"tag":204,"props":2330,"children":2331},{"style":433},[2332],{"type":153,"value":2333}," 200\n",{"type":148,"tag":204,"props":2335,"children":2336},{"class":206,"line":512},[2337],{"type":148,"tag":204,"props":2338,"children":2339},{"style":223},[2340],{"type":153,"value":2045},{"type":148,"tag":204,"props":2342,"children":2343},{"class":206,"line":974},[2344,2349,2353,2358],{"type":148,"tag":204,"props":2345,"children":2346},{"style":2190},[2347],{"type":153,"value":2348},"  rotate",{"type":148,"tag":204,"props":2350,"children":2351},{"style":223},[2352],{"type":153,"value":430},{"type":148,"tag":204,"props":2354,"children":2355},{"style":433},[2356],{"type":153,"value":2357},"180",{"type":148,"tag":204,"props":2359,"children":2360},{"style":223},[2361],{"type":153,"value":971},{"type":148,"tag":204,"props":2363,"children":2364},{"class":206,"line":1002},[2365,2370,2374],{"type":148,"tag":204,"props":2366,"children":2367},{"style":2190},[2368],{"type":153,"value":2369},"  bright",{"type":148,"tag":204,"props":2371,"children":2372},{"style":223},[2373],{"type":153,"value":430},{"type":148,"tag":204,"props":2375,"children":2376},{"style":433},[2377],{"type":153,"value":2378},"50\n",{"type":148,"tag":204,"props":2380,"children":2381},{"class":206,"line":1011},[2382],{"type":148,"tag":204,"props":2383,"children":2384},{"style":223},[2385],{"type":153,"value":2386},"  ...\n",{"type":148,"tag":204,"props":2388,"children":2389},{"class":206,"line":1023},[2390],{"type":148,"tag":204,"props":2391,"children":2392},{"style":223},[2393],{"type":153,"value":2394},"}\n",{"type":148,"tag":149,"props":2396,"children":2397},{},[2398,2400],{"type":153,"value":2399},"For more modifiers configuration items, see ",{"type":148,"tag":750,"props":2401,"children":2404},{"href":2402,"rel":2403},"https://help.aliyun.com/zh/cdn/user-guide/image-editing/",[1582],[2405],{"type":153,"value":2406},"aliyun cdn docs",{"type":148,"tag":1507,"props":2408,"children":2409},{},[2410],{"type":153,"value":1511},{"title":136,"searchDepth":240,"depth":240,"links":2412},[2413,2416],{"id":733,"depth":240,"text":2230,"children":2414},[2415],{"id":2233,"depth":250,"text":2239},{"id":675,"depth":240,"text":675},"content:3.providers:aliyun.md","3.providers/aliyun.md",1703164852476]