[{"data":1,"prerenderedAt":577},["ShallowReactive",2],{"navigation_docs":3,"-usage-nuxt-picture":200,"-usage-nuxt-picture-surround":572},[4,30,47,187],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","/get-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","/get-started/installation","1.get-started/1.installation",{"title":14,"path":15,"stem":16},"Configuration","/get-started/configuration","1.get-started/2.configuration",{"title":18,"path":19,"stem":20},"Providers","/get-started/providers","1.get-started/3.providers",{"title":22,"path":23,"stem":24},"Contributing","/get-started/contributing","1.get-started/4.contributing",{"title":26,"path":27,"stem":28},"Migration","/get-started/migration","1.get-started/5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","/usage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","/usage/nuxt-img","2.usage/1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","/usage/nuxt-picture","2.usage/2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","/usage/use-image","2.usage/3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"/providers","3.providers",[51,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183],{"title":52,"path":53,"stem":54},"Aliyun","/providers/aliyun","3.providers/aliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","/providers/aws-amplify","3.providers/aws-amplify",{"title":60,"path":61,"stem":62},"Bunny","/providers/bunny","3.providers/bunny",{"title":64,"path":65,"stem":66},"Caisy","/providers/caisy","3.providers/caisy",{"title":68,"path":69,"stem":70},"Cloudflare","/providers/cloudflare","3.providers/cloudflare",{"title":72,"path":73,"stem":74},"Cloudimage","/providers/cloudimage","3.providers/cloudimage",{"title":76,"path":77,"stem":78},"Cloudinary","/providers/cloudinary","3.providers/cloudinary",{"title":80,"path":81,"stem":82},"Contentful","/providers/contentful","3.providers/contentful",{"title":84,"path":85,"stem":86},"Directus","/providers/directus","3.providers/directus",{"title":88,"path":89,"stem":90},"Fastly","/providers/fastly","3.providers/fastly",{"title":92,"path":93,"stem":94},"Filerobot","/providers/filerobot","3.providers/filerobot",{"title":96,"path":97,"stem":98},"GitHub","/providers/github","3.providers/github",{"title":100,"path":101,"stem":102},"Glide","/providers/glide","3.providers/glide",{"title":104,"path":105,"stem":106},"Gumlet","/providers/gumlet","3.providers/gumlet",{"title":108,"path":109,"stem":110},"Hygraph","/providers/hygraph","3.providers/hygraph",{"title":112,"path":113,"stem":114},"ImageEngine","/providers/imageengine","3.providers/imageengine",{"title":116,"path":117,"stem":118},"ImageKit","/providers/imagekit","3.providers/imagekit",{"title":120,"path":121,"stem":122},"Imgix","/providers/imgix","3.providers/imgix",{"title":124,"path":125,"stem":126},"IPX","/providers/ipx","3.providers/ipx",{"title":128,"path":129,"stem":130},"Netlify","/providers/netlify","3.providers/netlify",{"title":132,"path":133,"stem":134},"None","/providers/none","3.providers/none",{"title":136,"path":137,"stem":138},"Prepr","/providers/prepr","3.providers/prepr",{"title":140,"path":141,"stem":142},"Prismic","/providers/prismic","3.providers/prismic",{"title":144,"path":145,"stem":146},"Sanity","/providers/sanity","3.providers/sanity",{"title":148,"path":149,"stem":150},"Shopify","/providers/shopify","3.providers/shopify",{"title":152,"path":153,"stem":154},"Sirv","/providers/sirv","3.providers/sirv",{"title":156,"path":157,"stem":158},"Storyblok","/providers/storyblok","3.providers/storyblok",{"title":160,"path":161,"stem":162},"Strapi","/providers/strapi","3.providers/strapi",{"title":164,"path":165,"stem":166},"Supabase","/providers/supabase","3.providers/supabase",{"title":168,"path":169,"stem":170},"Twicpics","/providers/twicpics","3.providers/twicpics",{"title":172,"path":173,"stem":174},"Unsplash","/providers/unsplash","3.providers/unsplash",{"title":176,"path":177,"stem":178},"Uploadcare","/providers/uploadcare","3.providers/uploadcare",{"title":180,"path":181,"stem":182},"Vercel","/providers/vercel","3.providers/vercel",{"title":184,"path":185,"stem":186},"Weserv","/providers/weserv","3.providers/weserv",{"title":188,"path":189,"stem":190,"children":191,"page":29},"Advanced","/advanced","4.advanced",[192,196],{"title":193,"path":194,"stem":195},"Custom Provider","/advanced/custom-provider","4.advanced/1.custom-provider",{"title":197,"path":198,"stem":199},"Static Images","/advanced/static-images","4.advanced/2.static-images",{"id":201,"title":40,"body":202,"description":560,"extension":561,"links":562,"meta":568,"navigation":569,"path":41,"seo":570,"stem":42,"__hash__":571},"docs/2.usage/2.nuxt-picture.md",{"type":203,"value":204,"toc":553},"minimark",[205,216,233,245,265,270,279,285,288,352,374,380,383,405,411,418,424,549],[206,207,208,211,212,215],"p",{},[209,210,40],"code",{}," is a drop-in replacement for the native ",[209,213,214],{},"\u003Cpicture>"," tag.",[206,217,218,219,221,222,228,229,232],{},"Usage of ",[209,220,40],{}," is almost identical to ",[223,224,226],"a",{"href":225},"nuxt-img",[209,227,36],{}," but also allows serving modern formats like ",[209,230,231],{},"webp"," when possible.",[206,234,235,236,244],{},"Learn more about the ",[223,237,241,243],{"href":238,"rel":239},"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture",[240],"nofollow",[209,242,214],{}," tag on MDN",".",[246,247,248,249,255,256,258,259,264],"warning",{},"Unlike the native ",[223,250,252,254],{"href":238,"rel":251},[240],[209,253,214],{}," element",", ",[209,257,40],{}," currently doesn't support using multiple image sources. See ",[223,260,263],{"href":261,"rel":262},"https://github.com/nuxt/image/issues/309",[240],"#309"," for more info.",[266,267,269],"h2",{"id":268},"props","Props",[271,272,273,274],"tip",{},"See props supported by ",[223,275,277],{"href":276},"/usage/nuxt-img#props",[209,278,36],{},[280,281,283],"h3",{"id":282},"format",[209,284,282],{},[206,286,287],{},"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.",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtPicture\n  format=\"avif,webp\"\n  src=\"/nuxt-icon.png\"\n/>\n","vue","",[209,296,297,310,330,345],{"__ignoreMap":294},[298,299,302,306],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"sMK4o","\u003C",[298,307,309],{"class":308},"swJcz","NuxtPicture\n",[298,311,313,317,320,323,327],{"class":300,"line":312},2,[298,314,316],{"class":315},"spNyl","  format",[298,318,319],{"class":304},"=",[298,321,322],{"class":304},"\"",[298,324,326],{"class":325},"sfazB","avif,webp",[298,328,329],{"class":304},"\"\n",[298,331,333,336,338,340,343],{"class":300,"line":332},3,[298,334,335],{"class":315},"  src",[298,337,319],{"class":304},[298,339,322],{"class":304},[298,341,342],{"class":325},"/nuxt-icon.png",[298,344,329],{"class":304},[298,346,348],{"class":300,"line":347},4,[298,349,351],{"class":350},"sTEyZ","/>\n",[206,353,354,355,255,357,255,360,255,363,255,366,369,370,373],{},"Available formats are ",[209,356,231],{},[209,358,359],{},"avif",[209,361,362],{},"jpeg",[209,364,365],{},"jpg",[209,367,368],{},"png",", and ",[209,371,372],{},"gif",". If the format is not specified, it will respect the default image format.",[280,375,377],{"id":376},"legacyformat",[209,378,379],{},"legacyFormat",[206,381,382],{},"Format used for fallback. Default is conditional:",[384,385,386,400],"ul",{},[387,388,389,390,255,392,369,394,396,397,399],"li",{},"If original format supports transparency (",[209,391,368],{},[209,393,231],{},[209,395,372],{},"), ",[209,398,368],{}," is used for fallback",[387,401,402,403,399],{},"Otherwise ",[209,404,362],{},[280,406,408],{"id":407},"imgattrs",[209,409,410],{},"imgAttrs",[206,412,413,414,417],{},"Allows you to set additional HTML-attributes on the ",[209,415,416],{},"img"," element.",[206,419,420],{},[421,422,423],"strong",{},"Example:",[289,425,427],{"className":291,"code":426,"language":293,"meta":294,"style":294},"\u003CNuxtPicture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{\n    id: 'my-id',\n    class: 'my-class',\n    style: 'display: block',\n    'data-my-data': 'my-value'\n  }\"\n/>\n",[209,428,429,435,447,461,481,498,515,536,544],{"__ignoreMap":294},[298,430,431,433],{"class":300,"line":301},[298,432,305],{"class":304},[298,434,309],{"class":308},[298,436,437,439,441,443,445],{"class":300,"line":312},[298,438,335],{"class":315},[298,440,319],{"class":304},[298,442,322],{"class":304},[298,444,342],{"class":325},[298,446,329],{"class":304},[298,448,449,452,454,456,458],{"class":300,"line":332},[298,450,451],{"class":304},"  :",[298,453,410],{"class":315},[298,455,319],{"class":304},[298,457,322],{"class":304},[298,459,460],{"class":304},"{\n",[298,462,463,466,469,472,475,478],{"class":300,"line":347},[298,464,465],{"class":308},"    id",[298,467,468],{"class":304},":",[298,470,471],{"class":304}," '",[298,473,474],{"class":325},"my-id",[298,476,477],{"class":304},"'",[298,479,480],{"class":304},",\n",[298,482,484,487,489,491,494,496],{"class":300,"line":483},5,[298,485,486],{"class":308},"    class",[298,488,468],{"class":304},[298,490,471],{"class":304},[298,492,493],{"class":325},"my-class",[298,495,477],{"class":304},[298,497,480],{"class":304},[298,499,501,504,506,508,511,513],{"class":300,"line":500},6,[298,502,503],{"class":308},"    style",[298,505,468],{"class":304},[298,507,471],{"class":304},[298,509,510],{"class":325},"display: block",[298,512,477],{"class":304},[298,514,480],{"class":304},[298,516,518,521,524,526,528,530,533],{"class":300,"line":517},7,[298,519,520],{"class":304},"    '",[298,522,523],{"class":308},"data-my-data",[298,525,477],{"class":304},[298,527,468],{"class":304},[298,529,471],{"class":304},[298,531,532],{"class":325},"my-value",[298,534,535],{"class":304},"'\n",[298,537,539,542],{"class":300,"line":538},8,[298,540,541],{"class":304},"  }",[298,543,329],{"class":304},[298,545,547],{"class":300,"line":546},9,[298,548,351],{"class":350},[550,551,552],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":294,"searchDepth":312,"depth":312,"links":554},[555],{"id":268,"depth":312,"text":269,"children":556},[557,558,559],{"id":282,"depth":332,"text":282},{"id":376,"depth":332,"text":379},{"id":407,"depth":332,"text":410},"Discover how to use and configure the Nuxt Picture component.","md",[563],{"label":564,"icon":565,"to":566,"size":567},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtPicture.vue","xs",{},true,{"title":40,"description":560},"LhR86d1U4gKFqVfOwoTa6PWK64hReEDWcoqScNRVJZc",[573,575],{"title":36,"path":37,"stem":38,"description":574,"children":-1},"Discover how to use and configure the Nuxt Image component.",{"title":44,"path":45,"stem":46,"description":576,"children":-1},"A Vue composable that returns a helper function to generate optimized image URLs.",1768512300210]