[{"data":1,"prerenderedAt":833},["Reactive",2],{"navigation":3,"docs-/providers/netlify":115,"docs-/providers/netlify-surround":274},[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":77,"_dir":116,"_draft":117,"_partial":117,"_locale":118,"title":76,"description":119,"links":120,"body":126,"_type":269,"_id":270,"_source":271,"_file":272,"_extension":273},"providers",false,"","Optimize images with Netlify's dynamic image transformation service.",[121],{"label":122,"icon":123,"to":124,"size":125},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/providers/netlify.ts","xs",{"type":127,"children":128,"toc":262},"root",[129,148,171,178,197,206],{"type":130,"tag":131,"props":132,"children":133},"element","p",{},[134,137,146],{"type":135,"value":136},"text","Netlify offers dynamic image transformation for all JPEG, PNG, and GIF files you have set to be tracked with ",{"type":130,"tag":138,"props":139,"children":143},"a",{"href":140,"rel":141},"https://docs.netlify.com/large-media/overview/",[142],"nofollow",[144],{"type":135,"value":145},"Netlify Large Media",{"type":135,"value":147},".",{"type":130,"tag":149,"props":150,"children":151},"callout",{},[152],{"type":130,"tag":131,"props":153,"children":154},{},[155,157,163,165,170],{"type":135,"value":156},"Before setting ",{"type":130,"tag":158,"props":159,"children":160},"code",{"className":118},[161],{"type":135,"value":162},"provider: 'netlify'",{"type":135,"value":164},", make sure you have followed the steps to enable ",{"type":130,"tag":138,"props":166,"children":168},{"href":140,"rel":167},[142],[169],{"type":135,"value":145},{"type":135,"value":147},{"type":130,"tag":172,"props":173,"children":175},"h2",{"id":174},"modifiers",[176],{"type":135,"value":177},"Modifiers",{"type":130,"tag":131,"props":179,"children":180},{},[181,183,188,190,195],{"type":135,"value":182},"In addition to ",{"type":130,"tag":158,"props":184,"children":185},{"className":118},[186],{"type":135,"value":187},"height",{"type":135,"value":189}," and ",{"type":130,"tag":158,"props":191,"children":192},{"className":118},[193],{"type":135,"value":194},"width",{"type":135,"value":196},", the Netlify provider supports the following modifiers:",{"type":130,"tag":198,"props":199,"children":201},"h3",{"id":200},"fit",[202],{"type":130,"tag":158,"props":203,"children":204},{"className":118},[205],{"type":135,"value":200},{"type":130,"tag":207,"props":208,"children":209},"ul",{},[210,227],{"type":130,"tag":211,"props":212,"children":213},"li",{},[214,220,222],{"type":130,"tag":215,"props":216,"children":217},"strong",{},[218],{"type":135,"value":219},"Default",{"type":135,"value":221},": ",{"type":130,"tag":158,"props":223,"children":224},{"className":118},[225],{"type":135,"value":226},"contain",{"type":130,"tag":211,"props":228,"children":229},{},[230,235,236,240,242,247,249,254,255,260],{"type":130,"tag":215,"props":231,"children":232},{},[233],{"type":135,"value":234},"Valid options",{"type":135,"value":221},{"type":130,"tag":158,"props":237,"children":238},{"className":118},[239],{"type":135,"value":226},{"type":135,"value":241}," (equivalent to ",{"type":130,"tag":158,"props":243,"children":244},{"className":118},[245],{"type":135,"value":246},"nf_resize=fit",{"type":135,"value":248},") and ",{"type":130,"tag":158,"props":250,"children":251},{"className":118},[252],{"type":135,"value":253},"fill",{"type":135,"value":241},{"type":130,"tag":158,"props":256,"children":257},{"className":118},[258],{"type":135,"value":259},"nf_resize=smartcrop",{"type":135,"value":261},")",{"title":118,"searchDepth":263,"depth":263,"links":264},2,[265],{"id":174,"depth":263,"text":177,"children":266},[267],{"id":200,"depth":268,"text":200},3,"markdown","content:3.providers:netlify.md","content","3.providers/netlify.md","md",[275,432],{"_path":74,"_dir":116,"_draft":117,"_partial":117,"_locale":118,"title":73,"description":276,"links":277,"body":280,"_type":269,"_id":430,"_source":271,"_file":431,"_extension":273},"IPX is the built-in and self hosted image optimizer for Nuxt Image.",[278],{"label":122,"icon":123,"to":279,"size":125},"https://github.com/nuxt/image/blob/main/src/runtime/providers/ipx.ts",{"type":127,"children":281,"toc":427},[282,312,318,332,340,421],{"type":130,"tag":131,"props":283,"children":284},{},[285,287,293,295,302,304,311],{"type":135,"value":286},"Nuxt Image comes with a ",{"type":130,"tag":138,"props":288,"children":290},{"href":289},"/get-started/providers#default-provider",[291],{"type":135,"value":292},"preconfigured instance",{"type":135,"value":294}," of ",{"type":130,"tag":138,"props":296,"children":299},{"href":297,"rel":298},"https://github.com/unjs/ipx",[142],[300],{"type":135,"value":301},"unjs/ipx",{"type":135,"value":303},". An open source, self-hosted image optimizer based on ",{"type":130,"tag":138,"props":305,"children":308},{"href":306,"rel":307},"https://github.com/lovell/sharp",[142],[309],{"type":135,"value":310},"lovell/sharp",{"type":135,"value":147},{"type":130,"tag":172,"props":313,"children":315},{"id":314},"additional-modifiers",[316],{"type":135,"value":317},"Additional Modifiers",{"type":130,"tag":131,"props":319,"children":320},{},[321,323,330],{"type":135,"value":322},"You can use ",{"type":130,"tag":138,"props":324,"children":327},{"href":325,"rel":326},"https://github.com/unjs/ipx/#modifiers",[142],[328],{"type":135,"value":329},"additional modifiers",{"type":135,"value":331}," supported by IPX.",{"type":130,"tag":131,"props":333,"children":334},{},[335],{"type":130,"tag":215,"props":336,"children":337},{},[338],{"type":135,"value":339},"Example:",{"type":130,"tag":341,"props":342,"children":346},"pre",{"className":343,"code":344,"language":345,"meta":118,"style":118},"language-html shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","\u003CNuxtImg src=\"/image.png\" :modifiers=\"{ grayscale: true, tint: '#00DC82' }\" />\n","html",[347],{"type":130,"tag":158,"props":348,"children":349},{"__ignoreMap":118},[350],{"type":130,"tag":351,"props":352,"children":355},"span",{"class":353,"line":354},"line",1,[356,362,368,374,379,384,390,394,399,403,407,412,416],{"type":130,"tag":351,"props":357,"children":359},{"style":358},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5",[360],{"type":135,"value":361},"\u003C",{"type":130,"tag":351,"props":363,"children":365},{"style":364},"color:#F07178;--shiki-dark:#F07178;--shiki-light:#E53935",[366],{"type":135,"value":367},"NuxtImg",{"type":130,"tag":351,"props":369,"children":371},{"style":370},"color:#C792EA;--shiki-dark:#C792EA;--shiki-light:#9C3EDA",[372],{"type":135,"value":373}," src",{"type":130,"tag":351,"props":375,"children":376},{"style":358},[377],{"type":135,"value":378},"=",{"type":130,"tag":351,"props":380,"children":381},{"style":358},[382],{"type":135,"value":383},"\"",{"type":130,"tag":351,"props":385,"children":387},{"style":386},"color:#C3E88D;--shiki-dark:#C3E88D;--shiki-light:#91B859",[388],{"type":135,"value":389},"/image.png",{"type":130,"tag":351,"props":391,"children":392},{"style":358},[393],{"type":135,"value":383},{"type":130,"tag":351,"props":395,"children":396},{"style":370},[397],{"type":135,"value":398}," :modifiers",{"type":130,"tag":351,"props":400,"children":401},{"style":358},[402],{"type":135,"value":378},{"type":130,"tag":351,"props":404,"children":405},{"style":358},[406],{"type":135,"value":383},{"type":130,"tag":351,"props":408,"children":409},{"style":386},[410],{"type":135,"value":411},"{ grayscale: true, tint: '#00DC82' }",{"type":130,"tag":351,"props":413,"children":414},{"style":358},[415],{"type":135,"value":383},{"type":130,"tag":351,"props":417,"children":418},{"style":358},[419],{"type":135,"value":420}," />",{"type":130,"tag":422,"props":423,"children":424},"style",{},[425],{"type":135,"value":426},"html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}html.light .shiki span {color: var(--shiki-light) !important;background: var(--shiki-light-bg) !important;font-style: var(--shiki-light-font-style) !important;font-weight: var(--shiki-light-font-weight) !important;text-decoration: var(--shiki-light-text-decoration) !important;}",{"title":118,"searchDepth":263,"depth":263,"links":428},[429],{"id":314,"depth":263,"text":317},"content:3.providers:ipx.md","3.providers/ipx.md",{"_path":80,"_dir":116,"_draft":117,"_partial":117,"_locale":118,"title":79,"description":433,"links":434,"body":437,"_type":269,"_id":831,"_source":271,"_file":832,"_extension":273},"Nuxt Image integration with Prepr CMS.",[435],{"label":122,"icon":123,"to":436,"size":125},"https://github.com/nuxt/image/tree/main/src/runtime/providers/prepr",{"type":127,"children":438,"toc":825},[439,452,464,613,617,631,636,658,680,686,691,762,769,782,807,821],{"type":130,"tag":131,"props":440,"children":441},{},[442,444,450],{"type":135,"value":443},"Integration between ",{"type":130,"tag":138,"props":445,"children":448},{"href":446,"rel":447},"https://prepr.io/",[142],[449],{"type":135,"value":79},{"type":135,"value":451}," and Nuxt Image.",{"type":130,"tag":131,"props":453,"children":454},{},[455,457,462],{"type":135,"value":456},"To use this provider you just need to specify the ",{"type":130,"tag":158,"props":458,"children":459},{"className":118},[460],{"type":135,"value":461},"projectName",{"type":135,"value":463}," of your project in Prepr.",{"type":130,"tag":341,"props":465,"children":470},{"className":466,"code":467,"filename":468,"language":469,"meta":118,"style":118},"language-ts shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","export default defineNuxtConfig({\n  image: {\n    prepr: {\n      // E.g.: https://YourProjectName.prepr.io/\n      projectName: 'YourProjectName',\n    }\n  }\n})\n","nuxt.config.ts","ts",[471],{"type":130,"tag":158,"props":472,"children":473},{"__ignoreMap":118},[474,505,523,539,549,582,591,600],{"type":130,"tag":351,"props":475,"children":476},{"class":353,"line":354},[477,483,488,494,500],{"type":130,"tag":351,"props":478,"children":480},{"style":479},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[481],{"type":135,"value":482},"export",{"type":130,"tag":351,"props":484,"children":485},{"style":479},[486],{"type":135,"value":487}," default",{"type":130,"tag":351,"props":489,"children":491},{"style":490},"color:#82AAFF;--shiki-dark:#82AAFF;--shiki-light:#6182B8",[492],{"type":135,"value":493}," defineNuxtConfig",{"type":130,"tag":351,"props":495,"children":497},{"style":496},"color:#EEFFFF;--shiki-dark:#BABED8;--shiki-light:#90A4AE",[498],{"type":135,"value":499},"(",{"type":130,"tag":351,"props":501,"children":502},{"style":358},[503],{"type":135,"value":504},"{",{"type":130,"tag":351,"props":506,"children":507},{"class":353,"line":263},[508,513,518],{"type":130,"tag":351,"props":509,"children":510},{"style":364},[511],{"type":135,"value":512},"  image",{"type":130,"tag":351,"props":514,"children":515},{"style":358},[516],{"type":135,"value":517},":",{"type":130,"tag":351,"props":519,"children":520},{"style":358},[521],{"type":135,"value":522}," {",{"type":130,"tag":351,"props":524,"children":525},{"class":353,"line":268},[526,531,535],{"type":130,"tag":351,"props":527,"children":528},{"style":364},[529],{"type":135,"value":530},"    prepr",{"type":130,"tag":351,"props":532,"children":533},{"style":358},[534],{"type":135,"value":517},{"type":130,"tag":351,"props":536,"children":537},{"style":358},[538],{"type":135,"value":522},{"type":130,"tag":351,"props":540,"children":542},{"class":353,"line":541},4,[543],{"type":130,"tag":351,"props":544,"children":546},{"style":545},"color:#546E7A;--shiki-dark:#676E95;--shiki-light:#90A4AE;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[547],{"type":135,"value":548},"      // E.g.: https://YourProjectName.prepr.io/",{"type":130,"tag":351,"props":550,"children":552},{"class":353,"line":551},5,[553,558,562,567,572,577],{"type":130,"tag":351,"props":554,"children":555},{"style":364},[556],{"type":135,"value":557},"      projectName",{"type":130,"tag":351,"props":559,"children":560},{"style":358},[561],{"type":135,"value":517},{"type":130,"tag":351,"props":563,"children":564},{"style":358},[565],{"type":135,"value":566}," '",{"type":130,"tag":351,"props":568,"children":569},{"style":386},[570],{"type":135,"value":571},"YourProjectName",{"type":130,"tag":351,"props":573,"children":574},{"style":358},[575],{"type":135,"value":576},"'",{"type":130,"tag":351,"props":578,"children":579},{"style":358},[580],{"type":135,"value":581},",",{"type":130,"tag":351,"props":583,"children":585},{"class":353,"line":584},6,[586],{"type":130,"tag":351,"props":587,"children":588},{"style":358},[589],{"type":135,"value":590},"    }",{"type":130,"tag":351,"props":592,"children":594},{"class":353,"line":593},7,[595],{"type":130,"tag":351,"props":596,"children":597},{"style":358},[598],{"type":135,"value":599},"  }",{"type":130,"tag":351,"props":601,"children":603},{"class":353,"line":602},8,[604,609],{"type":130,"tag":351,"props":605,"children":606},{"style":358},[607],{"type":135,"value":608},"}",{"type":130,"tag":351,"props":610,"children":611},{"style":496},[612],{"type":135,"value":261},{"type":130,"tag":172,"props":614,"children":615},{"id":174},[616],{"type":135,"value":177},{"type":130,"tag":131,"props":618,"children":619},{},[620,622,629],{"type":135,"value":621},"The Prepr provider supports a number of additional modifiers. For a full list,\ncheck out ",{"type":130,"tag":138,"props":623,"children":626},{"href":624,"rel":625},"https://docs.prepr.io/reference/rest/v1/assets-resizing/",[142],[627],{"type":135,"value":628},"the Prepr documentation",{"type":135,"value":630},".\nAll current transformations currently mentioned in Prepr docs are supported.",{"type":130,"tag":131,"props":632,"children":633},{},[634],{"type":135,"value":635},"For the time being you might find the following links useful:",{"type":130,"tag":207,"props":637,"children":638},{},[639,648],{"type":130,"tag":211,"props":640,"children":641},{},[642],{"type":130,"tag":138,"props":643,"children":645},{"href":624,"rel":644},[142],[646],{"type":135,"value":647},"Assets Resizing via REST API",{"type":130,"tag":211,"props":649,"children":650},{},[651],{"type":130,"tag":138,"props":652,"children":655},{"href":653,"rel":654},"https://docs.prepr.io/managing-content/images",[142],[656],{"type":135,"value":657},"Understanding your marketing and design team workflows",{"type":130,"tag":149,"props":659,"children":660},{},[661],{"type":130,"tag":131,"props":662,"children":663},{},[664,666,671,673,678],{"type":135,"value":665},"prepr.io does not provide a way to restrict what domains can\nrequest assets to your project's CDN, nor limit the maximum size in ",{"type":130,"tag":158,"props":667,"children":668},{"className":118},[669],{"type":135,"value":670},"pixels",{"type":135,"value":672}," or\n",{"type":130,"tag":158,"props":674,"children":675},{"className":118},[676],{"type":135,"value":677},"bytes",{"type":135,"value":679}," of images that are served from the CDN.",{"type":130,"tag":198,"props":681,"children":683},{"id":682},"convenience-key-modifiers",[684],{"type":135,"value":685},"Convenience key modifiers",{"type":130,"tag":131,"props":687,"children":688},{},[689],{"type":135,"value":690},"The following more readable modifiers are supported, in addition to Prepr's\nnative modifiers:",{"type":130,"tag":207,"props":692,"children":693},{},[694,709,722,735,749],{"type":130,"tag":211,"props":695,"children":696},{},[697,702,704],{"type":130,"tag":158,"props":698,"children":699},{"className":118},[700],{"type":135,"value":701},"crop",{"type":135,"value":703}," is equivalent to ",{"type":130,"tag":158,"props":705,"children":706},{"className":118},[707],{"type":135,"value":708},"c",{"type":130,"tag":211,"props":710,"children":711},{},[712,717,718],{"type":130,"tag":158,"props":713,"children":714},{"className":118},[715],{"type":135,"value":716},"format",{"type":135,"value":703},{"type":130,"tag":158,"props":719,"children":720},{"className":118},[721],{"type":135,"value":716},{"type":130,"tag":211,"props":723,"children":724},{},[725,729,730],{"type":130,"tag":158,"props":726,"children":727},{"className":118},[728],{"type":135,"value":187},{"type":135,"value":703},{"type":130,"tag":158,"props":731,"children":732},{"className":118},[733],{"type":135,"value":734},"h",{"type":130,"tag":211,"props":736,"children":737},{},[738,743,744],{"type":130,"tag":158,"props":739,"children":740},{"className":118},[741],{"type":135,"value":742},"quality",{"type":135,"value":703},{"type":130,"tag":158,"props":745,"children":746},{"className":118},[747],{"type":135,"value":748},"q",{"type":130,"tag":211,"props":750,"children":751},{},[752,756,757],{"type":130,"tag":158,"props":753,"children":754},{"className":118},[755],{"type":135,"value":194},{"type":135,"value":703},{"type":130,"tag":158,"props":758,"children":759},{"className":118},[760],{"type":135,"value":761},"w",{"type":130,"tag":198,"props":763,"children":764},{"id":200},[765],{"type":130,"tag":158,"props":766,"children":767},{"className":118},[768],{"type":135,"value":200},{"type":130,"tag":131,"props":770,"children":771},{},[772,774,780],{"type":135,"value":773},"In addition to the values specified in the Prepr docs, which are respected, the\nfollowing options from the ",{"type":130,"tag":138,"props":775,"children":777},{"href":776},"/usage/nuxt-img#fit",[778],{"type":135,"value":779},"default fit behavior",{"type":135,"value":781},"\nare supported:",{"type":130,"tag":207,"props":783,"children":784},{},[785],{"type":130,"tag":211,"props":786,"children":787},{},[788,793,795,799,801,806],{"type":130,"tag":158,"props":789,"children":790},{"className":118},[791],{"type":135,"value":792},"cover",{"type":135,"value":794}," - this will behave like the Prepr modifier ",{"type":130,"tag":158,"props":796,"children":797},{"className":118},[798],{"type":135,"value":701},{"type":135,"value":800},", when passed without\na value (defaults to ",{"type":130,"tag":158,"props":802,"children":803},{"className":118},[804],{"type":135,"value":805},"centre",{"type":135,"value":261},{"type":130,"tag":149,"props":808,"children":809},{},[810],{"type":130,"tag":131,"props":811,"children":812},{},[813,815,819],{"type":135,"value":814},"For the time being, other ",{"type":130,"tag":158,"props":816,"children":817},{"className":118},[818],{"type":135,"value":200},{"type":135,"value":820}," options are not supported by this provider.",{"type":130,"tag":422,"props":822,"children":823},{},[824],{"type":135,"value":426},{"title":118,"searchDepth":263,"depth":263,"links":826},[827],{"id":174,"depth":263,"text":177,"children":828},[829,830],{"id":682,"depth":268,"text":685},{"id":200,"depth":268,"text":200},"content:3.providers:prepr.md","3.providers/prepr.md",1697713006415]