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