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