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