[{"data":1,"prerenderedAt":744},["ShallowReactive",2],{"navigation_docs":3,"-providers-netlify":220,"-providers-netlify-surround":739},[4,30,47,207],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","\u002Fget-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F1.installation",{"title":14,"path":15,"stem":16},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F2.configuration",{"title":18,"path":19,"stem":20},"Providers","\u002Fget-started\u002Fproviders","1.get-started\u002F3.providers",{"title":22,"path":23,"stem":24},"Contributing","\u002Fget-started\u002Fcontributing","1.get-started\u002F4.contributing",{"title":26,"path":27,"stem":28},"Migration","\u002Fget-started\u002Fmigration","1.get-started\u002F5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","\u002Fusage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","\u002Fusage\u002Fnuxt-img","2.usage\u002F1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","\u002Fusage\u002Fnuxt-picture","2.usage\u002F2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","\u002Fusage\u002Fuse-image","2.usage\u002F3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"\u002Fproviders","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,187,191,195,199,203],{"title":52,"path":53,"stem":54},"Aliyun","\u002Fproviders\u002Faliyun","3.providers\u002Faliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","\u002Fproviders\u002Faws-amplify","3.providers\u002Faws-amplify",{"title":60,"path":61,"stem":62},"Builder.io","\u002Fproviders\u002Fbuilderio","3.providers\u002Fbuilderio",{"title":64,"path":65,"stem":66},"Bunny","\u002Fproviders\u002Fbunny","3.providers\u002Fbunny",{"title":68,"path":69,"stem":70},"Caisy","\u002Fproviders\u002Fcaisy","3.providers\u002Fcaisy",{"title":72,"path":73,"stem":74},"Cloudflare","\u002Fproviders\u002Fcloudflare","3.providers\u002Fcloudflare",{"title":76,"path":77,"stem":78},"Cloudflare Images","\u002Fproviders\u002Fcloudflareimages","3.providers\u002Fcloudflareimages",{"title":80,"path":81,"stem":82},"Cloudimage","\u002Fproviders\u002Fcloudimage","3.providers\u002Fcloudimage",{"title":84,"path":85,"stem":86},"Cloudinary","\u002Fproviders\u002Fcloudinary","3.providers\u002Fcloudinary",{"title":88,"path":89,"stem":90},"Contentful","\u002Fproviders\u002Fcontentful","3.providers\u002Fcontentful",{"title":92,"path":93,"stem":94},"Directus","\u002Fproviders\u002Fdirectus","3.providers\u002Fdirectus",{"title":96,"path":97,"stem":98},"Fastly","\u002Fproviders\u002Ffastly","3.providers\u002Ffastly",{"title":100,"path":101,"stem":102},"Filerobot","\u002Fproviders\u002Ffilerobot","3.providers\u002Ffilerobot",{"title":104,"path":105,"stem":106},"Flyimg","\u002Fproviders\u002Fflyimg","3.providers\u002Fflyimg",{"title":108,"path":109,"stem":110},"GitHub","\u002Fproviders\u002Fgithub","3.providers\u002Fgithub",{"title":112,"path":113,"stem":114},"Glide","\u002Fproviders\u002Fglide","3.providers\u002Fglide",{"title":116,"path":117,"stem":118},"Gumlet","\u002Fproviders\u002Fgumlet","3.providers\u002Fgumlet",{"title":120,"path":121,"stem":122},"Hygraph","\u002Fproviders\u002Fhygraph","3.providers\u002Fhygraph",{"title":124,"path":125,"stem":126},"ImageEngine","\u002Fproviders\u002Fimageengine","3.providers\u002Fimageengine",{"title":128,"path":129,"stem":130},"ImageKit","\u002Fproviders\u002Fimagekit","3.providers\u002Fimagekit",{"title":132,"path":133,"stem":134},"Imgix","\u002Fproviders\u002Fimgix","3.providers\u002Fimgix",{"title":136,"path":137,"stem":138},"IPX","\u002Fproviders\u002Fipx","3.providers\u002Fipx",{"title":140,"path":141,"stem":142},"Netlify","\u002Fproviders\u002Fnetlify","3.providers\u002Fnetlify",{"title":144,"path":145,"stem":146},"None","\u002Fproviders\u002Fnone","3.providers\u002Fnone",{"title":148,"path":149,"stem":150},"Picsum","\u002Fproviders\u002Fpicsum","3.providers\u002Fpicsum",{"title":152,"path":153,"stem":154},"Prepr","\u002Fproviders\u002Fprepr","3.providers\u002Fprepr",{"title":156,"path":157,"stem":158},"Prismic","\u002Fproviders\u002Fprismic","3.providers\u002Fprismic",{"title":160,"path":161,"stem":162},"Sanity","\u002Fproviders\u002Fsanity","3.providers\u002Fsanity",{"title":164,"path":165,"stem":166},"Shopify","\u002Fproviders\u002Fshopify","3.providers\u002Fshopify",{"title":168,"path":169,"stem":170},"Sirv","\u002Fproviders\u002Fsirv","3.providers\u002Fsirv",{"title":172,"path":173,"stem":174},"Storyblok","\u002Fproviders\u002Fstoryblok","3.providers\u002Fstoryblok",{"title":176,"path":177,"stem":178},"Strapi","\u002Fproviders\u002Fstrapi","3.providers\u002Fstrapi",{"title":180,"path":181,"stem":182},"Supabase","\u002Fproviders\u002Fsupabase","3.providers\u002Fsupabase",{"title":184,"path":185,"stem":186},"Twicpics","\u002Fproviders\u002Ftwicpics","3.providers\u002Ftwicpics",{"title":188,"path":189,"stem":190},"Umbraco","\u002Fproviders\u002Fumbraco","3.providers\u002Fumbraco",{"title":192,"path":193,"stem":194},"Unsplash","\u002Fproviders\u002Funsplash","3.providers\u002Funsplash",{"title":196,"path":197,"stem":198},"Uploadcare","\u002Fproviders\u002Fuploadcare","3.providers\u002Fuploadcare",{"title":200,"path":201,"stem":202},"Vercel","\u002Fproviders\u002Fvercel","3.providers\u002Fvercel",{"title":204,"path":205,"stem":206},"Weserv","\u002Fproviders\u002Fweserv","3.providers\u002Fweserv",{"title":208,"path":209,"stem":210,"children":211,"page":29},"Advanced","\u002Fadvanced","4.advanced",[212,216],{"title":213,"path":214,"stem":215},"Custom Provider","\u002Fadvanced\u002Fcustom-provider","4.advanced\u002F1.custom-provider",{"title":217,"path":218,"stem":219},"Static Images","\u002Fadvanced\u002Fstatic-images","4.advanced\u002F2.static-images",{"id":221,"title":140,"body":222,"description":727,"extension":728,"links":729,"meta":735,"navigation":736,"path":141,"seo":737,"stem":142,"__hash__":738},"docs\u002F3.providers\u002Fnetlify.md",{"type":223,"value":224,"toc":718},"minimark",[225,243,252,260,339,344,352,356,359,431,435,454,610,614,632,637,647,651,659,664,675,681,714],[226,227,228,229,236,237,242],"p",{},"When deploying your Nuxt applications to ",[230,231,235],"a",{"href":232,"rel":233},"https:\u002F\u002Fdocs.netlify.com\u002Fplatform\u002Foverview",[234],"nofollow","Netlify's composable platform",", the image module uses ",[230,238,241],{"href":239,"rel":240},"https:\u002F\u002Fdocs.netlify.com\u002Fimage-cdn\u002Foverview",[234],"Netlify Image CDN"," to optimize and transform images on demand without impacting build times. Netlify Image CDN also handles content negotiation to use the most efficient image format for the requesting client.",[226,244,245,246,251],{},"This provider is automatically enabled in Netlify deployments, and also when running locally using the ",[230,247,250],{"href":248,"rel":249},"https:\u002F\u002Fdocs.netlify.com\u002Fcli\u002Flocal-development",[234],"Netlify CLI",".",[226,253,254,255,259],{},"You can also manually enable this provider. To do so, set the provider to ",[256,257,258],"code",{},"netlify"," or add the following to your Nuxt configuration:",[261,262,268],"pre",{"className":263,"code":264,"filename":265,"language":266,"meta":267,"style":267},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    provider: 'netlify'\n  }\n})\n","nuxt.config.ts","ts","",[256,269,270,294,307,324,330],{"__ignoreMap":267},[271,272,275,279,282,286,290],"span",{"class":273,"line":274},"line",1,[271,276,278],{"class":277},"s7zQu","export",[271,280,281],{"class":277}," default",[271,283,285],{"class":284},"s2Zo4"," defineNuxtConfig",[271,287,289],{"class":288},"sTEyZ","(",[271,291,293],{"class":292},"sMK4o","{\n",[271,295,297,301,304],{"class":273,"line":296},2,[271,298,300],{"class":299},"swJcz","  image",[271,302,303],{"class":292},":",[271,305,306],{"class":292}," {\n",[271,308,310,313,315,318,321],{"class":273,"line":309},3,[271,311,312],{"class":299},"    provider",[271,314,303],{"class":292},[271,316,317],{"class":292}," '",[271,319,258],{"class":320},"sfazB",[271,322,323],{"class":292},"'\n",[271,325,327],{"class":273,"line":326},4,[271,328,329],{"class":292},"  }\n",[271,331,333,336],{"class":273,"line":332},5,[271,334,335],{"class":292},"}",[271,337,338],{"class":288},")\n",[340,341,343],"h2",{"id":342},"local-development","Local Development",[226,345,346,347,351],{},"To test image transformations locally, use ",[230,348,350],{"href":248,"rel":349},[234],"Netlify Dev",". This feature of the Netlify CLI runs a local development server that mimics the Netlify production environment, including Netlify Image CDN.",[340,353,355],{"id":354},"remote-images","Remote Images",[226,357,358],{},"To transform a source image hosted on another domain, you must first configure allowed domains:",[261,360,362],{"className":263,"code":361,"filename":265,"language":266,"meta":267,"style":267},"export default defineNuxtConfig({\n  image: {\n    provider: 'netlify',\n    domains: ['images.example.com']\n  }\n})\n",[256,363,364,376,384,400,420,424],{"__ignoreMap":267},[271,365,366,368,370,372,374],{"class":273,"line":274},[271,367,278],{"class":277},[271,369,281],{"class":277},[271,371,285],{"class":284},[271,373,289],{"class":288},[271,375,293],{"class":292},[271,377,378,380,382],{"class":273,"line":296},[271,379,300],{"class":299},[271,381,303],{"class":292},[271,383,306],{"class":292},[271,385,386,388,390,392,394,397],{"class":273,"line":309},[271,387,312],{"class":299},[271,389,303],{"class":292},[271,391,317],{"class":292},[271,393,258],{"class":320},[271,395,396],{"class":292},"'",[271,398,399],{"class":292},",\n",[271,401,402,405,407,410,412,415,417],{"class":273,"line":326},[271,403,404],{"class":299},"    domains",[271,406,303],{"class":292},[271,408,409],{"class":288}," [",[271,411,396],{"class":292},[271,413,414],{"class":320},"images.example.com",[271,416,396],{"class":292},[271,418,419],{"class":288},"]\n",[271,421,422],{"class":273,"line":332},[271,423,329],{"class":292},[271,425,427,429],{"class":273,"line":426},6,[271,428,335],{"class":292},[271,430,338],{"class":288},[340,432,434],{"id":433},"modifiers","Modifiers",[226,436,437,438,443,444,453],{},"Beyond the ",[230,439,442],{"href":440,"rel":441},"https:\u002F\u002Fimage.nuxt.com\u002Fusage\u002Fnuxt-img",[234],"standard properties",", you can use the ",[230,445,448,449,452],{"href":446,"rel":447},"https:\u002F\u002Fdocs.netlify.com\u002Fimage-cdn\u002Foverview\u002F#position",[234],"Netlify Image CDN ",[256,450,451],{},"position"," parameter"," as a modifier for Nuxt Image.",[261,455,459],{"className":456,"code":457,"language":458,"meta":267,"style":267},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"netlify\"\n  src=\"owl.jpg\"\n  height=\"400\"\n  width=\"600\"\n  fit=\"cover\"\n  format=\"webp\"\n  quality=\"80\"\n  :modifiers=\"{ position: 'left' }\"\n\u002F>\n","vue",[256,460,461,469,486,500,514,528,542,557,572,604],{"__ignoreMap":267},[271,462,463,466],{"class":273,"line":274},[271,464,465],{"class":292},"\u003C",[271,467,468],{"class":299},"NuxtImg\n",[271,470,471,475,478,481,483],{"class":273,"line":296},[271,472,474],{"class":473},"spNyl","  provider",[271,476,477],{"class":292},"=",[271,479,480],{"class":292},"\"",[271,482,258],{"class":320},[271,484,485],{"class":292},"\"\n",[271,487,488,491,493,495,498],{"class":273,"line":309},[271,489,490],{"class":473},"  src",[271,492,477],{"class":292},[271,494,480],{"class":292},[271,496,497],{"class":320},"owl.jpg",[271,499,485],{"class":292},[271,501,502,505,507,509,512],{"class":273,"line":326},[271,503,504],{"class":473},"  height",[271,506,477],{"class":292},[271,508,480],{"class":292},[271,510,511],{"class":320},"400",[271,513,485],{"class":292},[271,515,516,519,521,523,526],{"class":273,"line":332},[271,517,518],{"class":473},"  width",[271,520,477],{"class":292},[271,522,480],{"class":292},[271,524,525],{"class":320},"600",[271,527,485],{"class":292},[271,529,530,533,535,537,540],{"class":273,"line":426},[271,531,532],{"class":473},"  fit",[271,534,477],{"class":292},[271,536,480],{"class":292},[271,538,539],{"class":320},"cover",[271,541,485],{"class":292},[271,543,545,548,550,552,555],{"class":273,"line":544},7,[271,546,547],{"class":473},"  format",[271,549,477],{"class":292},[271,551,480],{"class":292},[271,553,554],{"class":320},"webp",[271,556,485],{"class":292},[271,558,560,563,565,567,570],{"class":273,"line":559},8,[271,561,562],{"class":473},"  quality",[271,564,477],{"class":292},[271,566,480],{"class":292},[271,568,569],{"class":320},"80",[271,571,485],{"class":292},[271,573,575,578,580,582,584,587,590,592,594,597,599,602],{"class":273,"line":574},9,[271,576,577],{"class":292},"  :",[271,579,433],{"class":473},[271,581,477],{"class":292},[271,583,480],{"class":292},[271,585,586],{"class":292},"{",[271,588,589],{"class":299}," position",[271,591,303],{"class":292},[271,593,317],{"class":292},[271,595,596],{"class":320},"left",[271,598,396],{"class":292},[271,600,601],{"class":292}," }",[271,603,485],{"class":292},[271,605,607],{"class":273,"line":606},10,[271,608,609],{"class":288},"\u002F>\n",[340,611,613],{"id":612},"deprecated-netlify-large-media-option","Deprecated Netlify Large Media option",[615,616,617,618,623,624,627,628,631],"warning",{},"Netlify’s Large Media service is ",[230,619,622],{"href":620,"rel":621},"https:\u002F\u002Fanswers.netlify.com\u002Ft\u002Flarge-media-feature-deprecated-but-not-removed\u002F100804",[234],"deprecated",". If this feature is already enabled for your site on Netlify and you have already set ",[256,625,626],{},"provider: 'netlify'"," in your Nuxt configuration, then this will be detected at build time and Large Media continues to work on your site as usual. You can also explicitly enable it by setting ",[256,629,630],{},"provider: 'netlifyLargeMedia'",". However, new Large Media configuration is not recommended.",[633,634,636],"h3",{"id":635},"migrate-to-netlify-image-cdn","Migrate to Netlify Image CDN",[226,638,639,640,642,643,646],{},"To migrate from the deprecated Netlify Large Media option to the more robust Netlify Image CDN option, change ",[256,641,626],{}," to ",[256,644,645],{},"provider: 'netlifyImageCdn'",". This will enable the Netlify Image CDN service, even if large media is enabled on your site.",[633,648,650],{"id":649},"use-deprecated-netlify-large-media-option","Use deprecated Netlify Large Media option",[226,652,653,654,251],{},"If you're not ready to migrate to the more robust Netlify Image CDN option, Netlify continues to support dynamic image transformation for all JPEG, PNG, and GIF files you have set to be tracked with ",[230,655,658],{"href":656,"rel":657},"https:\u002F\u002Fdocs.netlify.com\u002Flarge-media\u002Foverview",[234],"Netlify Large Media",[660,661,663],"h4",{"id":662},"large-media-modifiers","Large Media Modifiers",[226,665,666,667,670,671,674],{},"In addition to ",[256,668,669],{},"height"," and ",[256,672,673],{},"width",", the deprecated Netlify Large Media provider supports the following modifiers:",[676,677,679],"h5",{"id":678},"fit",[256,680,678],{},[682,683,684,695],"ul",{},[685,686,687,691,692],"li",{},[688,689,690],"strong",{},"Default",": ",[256,693,694],{},"contain",[685,696,697,691,700,702,703,706,707,702,710,713],{},[688,698,699],{},"Valid options",[256,701,694],{}," (equivalent to ",[256,704,705],{},"nf_resize=fit",") and ",[256,708,709],{},"fill",[256,711,712],{},"nf_resize=smartcrop",")",[715,716,717],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":267,"searchDepth":296,"depth":296,"links":719},[720,721,722,723],{"id":342,"depth":296,"text":343},{"id":354,"depth":296,"text":355},{"id":433,"depth":296,"text":434},{"id":612,"depth":296,"text":613,"children":724},[725,726],{"id":635,"depth":309,"text":636},{"id":649,"depth":309,"text":650},"Optimize images with Netlify's dynamic image transformation service.","md",[730],{"label":731,"icon":732,"to":733,"size":734},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fproviders\u002Fnetlify.ts","xs",{},true,{"title":140,"description":727},"NRtg_JiLDXnlWNxNweQ9PwCnPksHLxVgi4JTAssv6l8",[740,742],{"title":136,"path":137,"stem":138,"description":741,"children":-1},"IPX is the built-in and self hosted image optimizer for Nuxt Image.",{"title":144,"path":145,"stem":146,"description":743,"children":-1},"A pass-through provider that returns images without any transformations.",1775284310009]