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