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