[{"data":1,"prerenderedAt":878},["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,"_empty":114,"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-inline",{},[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,433],{"_path":71,"_dir":113,"_draft":114,"_partial":114,"_locale":115,"_empty":114,"title":70,"description":267,"body":268,"_type":260,"_id":431,"_source":262,"_file":432,"_extension":264},"IPX is the built-in and self hosted image optimizer for Nuxt Image.",{"type":118,"children":269,"toc":428},[270,300,306,320,328,423],{"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":335},"code",{"className":331,"code":333,"language":334,"meta":115},[332],"language-html","\u003CNuxtImg src=\"/image.png\" :modifiers=\"{ grayscale: true, tint: '#00DC82' }\" />\n","html",[336],{"type":121,"tag":337,"props":338,"children":339},"pre",{},[340],{"type":121,"tag":329,"props":341,"children":342},{"__ignoreMap":115},[343],{"type":121,"tag":344,"props":345,"children":348},"span",{"class":346,"line":347},"line",1,[349,355,361,366,372,377,382,388,392,396,401,405,409,414,418],{"type":121,"tag":344,"props":350,"children":352},{"class":351},"ct-209289",[353],{"type":126,"value":354},"\u003C",{"type":121,"tag":344,"props":356,"children":358},{"class":357},"ct-007771",[359],{"type":126,"value":360},"NuxtImg",{"type":121,"tag":344,"props":362,"children":363},{"class":351},[364],{"type":126,"value":365}," ",{"type":121,"tag":344,"props":367,"children":369},{"class":368},"ct-046724",[370],{"type":126,"value":371},"src",{"type":121,"tag":344,"props":373,"children":374},{"class":351},[375],{"type":126,"value":376},"=",{"type":121,"tag":344,"props":378,"children":379},{"class":351},[380],{"type":126,"value":381},"\"",{"type":121,"tag":344,"props":383,"children":385},{"class":384},"ct-709943",[386],{"type":126,"value":387},"/image.png",{"type":121,"tag":344,"props":389,"children":390},{"class":351},[391],{"type":126,"value":381},{"type":121,"tag":344,"props":393,"children":394},{"class":351},[395],{"type":126,"value":365},{"type":121,"tag":344,"props":397,"children":398},{"class":368},[399],{"type":126,"value":400},":modifiers",{"type":121,"tag":344,"props":402,"children":403},{"class":351},[404],{"type":126,"value":376},{"type":121,"tag":344,"props":406,"children":407},{"class":351},[408],{"type":126,"value":381},{"type":121,"tag":344,"props":410,"children":411},{"class":384},[412],{"type":126,"value":413},"{ grayscale: true, tint: '#00DC82' }",{"type":121,"tag":344,"props":415,"children":416},{"class":351},[417],{"type":126,"value":381},{"type":121,"tag":344,"props":419,"children":420},{"class":351},[421],{"type":126,"value":422}," />",{"type":121,"tag":424,"children":425},"style",[426],{"type":126,"value":427},".light .ct-209289{color:#39ADB5;}\n.ct-209289{color:#89DDFF;}\n.light .ct-007771{color:#E53935;}\n.ct-007771{color:#F07178;}\n.light .ct-046724{color:#9C3EDA;}\n.ct-046724{color:#C792EA;}\n.light .ct-709943{color:#91B859;}\n.ct-709943{color:#C3E88D;}",{"title":115,"searchDepth":254,"depth":254,"links":429},[430],{"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,"_empty":114,"title":76,"description":434,"body":435,"_type":260,"_id":876,"_source":262,"_file":877,"_extension":264},"Nuxt Image integration with Prepr CMS.",{"type":118,"children":436,"toc":870},[437,450,462,658,662,676,681,703,725,731,736,807,814,827,852,866],{"type":121,"tag":122,"props":438,"children":439},{},[440,442,448],{"type":126,"value":441},"Integration between ",{"type":121,"tag":129,"props":443,"children":446},{"href":444,"rel":445},"https://prepr.io/",[133],[447],{"type":126,"value":76},{"type":126,"value":449}," and Nuxt Image.",{"type":121,"tag":122,"props":451,"children":452},{},[453,455,460],{"type":126,"value":454},"To use this provider you just need to specify the ",{"type":121,"tag":149,"props":456,"children":457},{},[458],{"type":126,"value":459},"projectName",{"type":126,"value":461}," of your project in Prepr.",{"type":121,"tag":329,"props":463,"children":469},{"className":464,"code":466,"filename":467,"language":468,"meta":115},[465],"language-ts","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",[470],{"type":121,"tag":337,"props":471,"children":472},{},[473],{"type":121,"tag":329,"props":474,"children":475},{"__ignoreMap":115},[476,515,541,566,581,620,633,645],{"type":121,"tag":344,"props":477,"children":478},{"class":346,"line":347},[479,485,490,495,499,505,510],{"type":121,"tag":344,"props":480,"children":482},{"class":481},"ct-064524",[483],{"type":126,"value":484},"export",{"type":121,"tag":344,"props":486,"children":488},{"class":487},"ct-770753",[489],{"type":126,"value":365},{"type":121,"tag":344,"props":491,"children":492},{"class":481},[493],{"type":126,"value":494},"default",{"type":121,"tag":344,"props":496,"children":497},{"class":487},[498],{"type":126,"value":365},{"type":121,"tag":344,"props":500,"children":502},{"class":501},"ct-750008",[503],{"type":126,"value":504},"defineNuxtConfig",{"type":121,"tag":344,"props":506,"children":507},{"class":487},[508],{"type":126,"value":509},"(",{"type":121,"tag":344,"props":511,"children":512},{"class":351},[513],{"type":126,"value":514},"{\n",{"type":121,"tag":344,"props":516,"children":517},{"class":346,"line":254},[518,523,528,533,537],{"type":121,"tag":344,"props":519,"children":520},{"class":487},[521],{"type":126,"value":522},"  ",{"type":121,"tag":344,"props":524,"children":525},{"class":357},[526],{"type":126,"value":527},"image",{"type":121,"tag":344,"props":529,"children":530},{"class":351},[531],{"type":126,"value":532},":",{"type":121,"tag":344,"props":534,"children":535},{"class":487},[536],{"type":126,"value":365},{"type":121,"tag":344,"props":538,"children":539},{"class":351},[540],{"type":126,"value":514},{"type":121,"tag":344,"props":542,"children":543},{"class":346,"line":259},[544,549,554,558,562],{"type":121,"tag":344,"props":545,"children":546},{"class":487},[547],{"type":126,"value":548},"    ",{"type":121,"tag":344,"props":550,"children":551},{"class":357},[552],{"type":126,"value":553},"prepr",{"type":121,"tag":344,"props":555,"children":556},{"class":351},[557],{"type":126,"value":532},{"type":121,"tag":344,"props":559,"children":560},{"class":487},[561],{"type":126,"value":365},{"type":121,"tag":344,"props":563,"children":564},{"class":351},[565],{"type":126,"value":514},{"type":121,"tag":344,"props":567,"children":569},{"class":346,"line":568},4,[570,575],{"type":121,"tag":344,"props":571,"children":572},{"class":351},[573],{"type":126,"value":574},"      ",{"type":121,"tag":344,"props":576,"children":578},{"class":577},"ct-458184",[579],{"type":126,"value":580},"// E.g.: https://YourProjectName.prepr.io/\n",{"type":121,"tag":344,"props":582,"children":584},{"class":346,"line":583},5,[585,589,593,597,601,606,611,615],{"type":121,"tag":344,"props":586,"children":587},{"class":487},[588],{"type":126,"value":574},{"type":121,"tag":344,"props":590,"children":591},{"class":357},[592],{"type":126,"value":459},{"type":121,"tag":344,"props":594,"children":595},{"class":351},[596],{"type":126,"value":532},{"type":121,"tag":344,"props":598,"children":599},{"class":487},[600],{"type":126,"value":365},{"type":121,"tag":344,"props":602,"children":603},{"class":351},[604],{"type":126,"value":605},"'",{"type":121,"tag":344,"props":607,"children":608},{"class":384},[609],{"type":126,"value":610},"YourProjectName",{"type":121,"tag":344,"props":612,"children":613},{"class":351},[614],{"type":126,"value":605},{"type":121,"tag":344,"props":616,"children":617},{"class":351},[618],{"type":126,"value":619},",\n",{"type":121,"tag":344,"props":621,"children":623},{"class":346,"line":622},6,[624,628],{"type":121,"tag":344,"props":625,"children":626},{"class":487},[627],{"type":126,"value":548},{"type":121,"tag":344,"props":629,"children":630},{"class":351},[631],{"type":126,"value":632},"}\n",{"type":121,"tag":344,"props":634,"children":636},{"class":346,"line":635},7,[637,641],{"type":121,"tag":344,"props":638,"children":639},{"class":487},[640],{"type":126,"value":522},{"type":121,"tag":344,"props":642,"children":643},{"class":351},[644],{"type":126,"value":632},{"type":121,"tag":344,"props":646,"children":648},{"class":346,"line":647},8,[649,654],{"type":121,"tag":344,"props":650,"children":651},{"class":351},[652],{"type":126,"value":653},"}",{"type":121,"tag":344,"props":655,"children":656},{"class":487},[657],{"type":126,"value":252},{"type":121,"tag":163,"props":659,"children":660},{"id":165},[661],{"type":126,"value":168},{"type":121,"tag":122,"props":663,"children":664},{},[665,667,674],{"type":126,"value":666},"The Prepr provider supports a number of additional modifiers. For a full list,\ncheck out ",{"type":121,"tag":129,"props":668,"children":671},{"href":669,"rel":670},"https://docs.prepr.io/reference/rest/v1/assets-resizing/",[133],[672],{"type":126,"value":673},"the Prepr documentation",{"type":126,"value":675},".\nAll current transformations currently mentioned in Prepr docs are supported.",{"type":121,"tag":122,"props":677,"children":678},{},[679],{"type":126,"value":680},"For the time being you might find the following links useful:",{"type":121,"tag":198,"props":682,"children":683},{},[684,693],{"type":121,"tag":202,"props":685,"children":686},{},[687],{"type":121,"tag":129,"props":688,"children":690},{"href":669,"rel":689},[133],[691],{"type":126,"value":692},"Assets Resizing via REST API",{"type":121,"tag":202,"props":694,"children":695},{},[696],{"type":121,"tag":129,"props":697,"children":700},{"href":698,"rel":699},"https://docs.prepr.io/managing-content/images",[133],[701],{"type":126,"value":702},"Understanding your marketing and design team workflows",{"type":121,"tag":140,"props":704,"children":705},{},[706],{"type":121,"tag":122,"props":707,"children":708},{},[709,711,716,718,723],{"type":126,"value":710},"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":712,"children":713},{},[714],{"type":126,"value":715},"pixels",{"type":126,"value":717}," or\n",{"type":121,"tag":149,"props":719,"children":720},{},[721],{"type":126,"value":722},"bytes",{"type":126,"value":724}," of images that are served from the CDN.",{"type":121,"tag":189,"props":726,"children":728},{"id":727},"convenience-key-modifiers",[729],{"type":126,"value":730},"Convenience key modifiers",{"type":121,"tag":122,"props":732,"children":733},{},[734],{"type":126,"value":735},"The following more readable modifiers are supported, in addition to Prepr's\nnative modifiers:",{"type":121,"tag":198,"props":737,"children":738},{},[739,754,767,780,794],{"type":121,"tag":202,"props":740,"children":741},{},[742,747,749],{"type":121,"tag":149,"props":743,"children":744},{},[745],{"type":126,"value":746},"crop",{"type":126,"value":748}," is equivalent to ",{"type":121,"tag":149,"props":750,"children":751},{},[752],{"type":126,"value":753},"c",{"type":121,"tag":202,"props":755,"children":756},{},[757,762,763],{"type":121,"tag":149,"props":758,"children":759},{},[760],{"type":126,"value":761},"format",{"type":126,"value":748},{"type":121,"tag":149,"props":764,"children":765},{},[766],{"type":126,"value":761},{"type":121,"tag":202,"props":768,"children":769},{},[770,774,775],{"type":121,"tag":149,"props":771,"children":772},{},[773],{"type":126,"value":178},{"type":126,"value":748},{"type":121,"tag":149,"props":776,"children":777},{},[778],{"type":126,"value":779},"h",{"type":121,"tag":202,"props":781,"children":782},{},[783,788,789],{"type":121,"tag":149,"props":784,"children":785},{},[786],{"type":126,"value":787},"quality",{"type":126,"value":748},{"type":121,"tag":149,"props":790,"children":791},{},[792],{"type":126,"value":793},"q",{"type":121,"tag":202,"props":795,"children":796},{},[797,801,802],{"type":121,"tag":149,"props":798,"children":799},{},[800],{"type":126,"value":185},{"type":126,"value":748},{"type":121,"tag":149,"props":803,"children":804},{},[805],{"type":126,"value":806},"w",{"type":121,"tag":189,"props":808,"children":809},{"id":191},[810],{"type":121,"tag":149,"props":811,"children":812},{},[813],{"type":126,"value":191},{"type":121,"tag":122,"props":815,"children":816},{},[817,819,825],{"type":126,"value":818},"In addition to the values specified in the Prepr docs, which are respected, the\nfollowing options from the ",{"type":121,"tag":129,"props":820,"children":822},{"href":821},"/usage/nuxt-img#fit",[823],{"type":126,"value":824},"default fit behavior",{"type":126,"value":826},"\nare supported:",{"type":121,"tag":198,"props":828,"children":829},{},[830],{"type":121,"tag":202,"props":831,"children":832},{},[833,838,840,844,846,851],{"type":121,"tag":149,"props":834,"children":835},{},[836],{"type":126,"value":837},"cover",{"type":126,"value":839}," - this will behave like the Prepr modifier ",{"type":121,"tag":149,"props":841,"children":842},{},[843],{"type":126,"value":746},{"type":126,"value":845},", when passed without\na value (defaults to ",{"type":121,"tag":149,"props":847,"children":848},{},[849],{"type":126,"value":850},"centre",{"type":126,"value":252},{"type":121,"tag":140,"props":853,"children":854},{},[855],{"type":121,"tag":122,"props":856,"children":857},{},[858,860,864],{"type":126,"value":859},"For the time being, other ",{"type":121,"tag":149,"props":861,"children":862},{},[863],{"type":126,"value":191},{"type":126,"value":865}," options are not supported by this provider.",{"type":121,"tag":424,"children":867},[868],{"type":126,"value":869},".light .ct-064524{color:#39ADB5;font-style:italic;}\n.ct-064524{color:#89DDFF;font-style:italic;}\n.light .ct-770753{color:#90A4AE;}\n.ct-770753{color:#EEFFFF;}\n.dark .ct-770753{color:#A6ACCD;}\n.light .ct-750008{color:#6182B8;}\n.ct-750008{color:#82AAFF;}\n.light .ct-209289{color:#39ADB5;}\n.ct-209289{color:#89DDFF;}\n.light .ct-007771{color:#E53935;}\n.ct-007771{color:#F07178;}\n.light .ct-458184{color:#90A4AE;font-style:italic;}\n.ct-458184{color:#546E7A;font-style:italic;}\n.dark .ct-458184{color:#676E95;font-style:italic;}\n.light .ct-709943{color:#91B859;}\n.ct-709943{color:#C3E88D;}",{"title":115,"searchDepth":254,"depth":254,"links":871},[872],{"id":165,"depth":254,"text":168,"children":873},[874,875],{"id":727,"depth":259,"text":730},{"id":191,"depth":259,"text":191},"content:3.providers:prepr.md","3.providers/prepr.md",1693229328137]