{"_path":"/providers/ipx","_draft":false,"_partial":false,"_empty":false,"title":"IPX","description":"Self hosted image provider","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image comes with a "},{"type":"element","tag":"a","props":{"href":"/getting-started/providers#default-provider"},"children":[{"type":"text","value":"preconfigured instance"}]},{"type":"text","value":" of "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/ipx","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":". An open source, self-hosted image optimizer based on "},{"type":"element","tag":"a","props":{"href":"https://github.com/lovell/sharp","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"sharp"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"using-ipx-in-production"},"children":[{"type":"text","value":"Using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" in production"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use IPX for self-hosting as an alternative to use service providers for production."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You don't need to follow this section if using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"target: 'static'"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"runtime-module"},"children":[{"type":"text","value":"Runtime Module"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Just add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" (instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buildModules"}]},{"type":"text","value":") in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":". This will ensure that the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_ipx"}]},{"type":"text","value":" endpoint continues to work in production."}]},{"type":"element","tag":"h3","props":{"id":"advanced-custom-servermiddleware"},"children":[{"type":"text","value":"Advanced: Custom ServerMiddleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have a use case of a custom IPX instance serving other that "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" dir, you may instead create a server Middleware that handles the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_ipx"}]},{"type":"text","value":" endpoint:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" as a dependency:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"yarn",":active":"true","active":true},"children":[{"type":"element","tag":"code","props":{"code":"yarn add ipx\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add ipx\n"}]}]}]}]},{"type":"element","tag":"code-block","props":{"label":"npm"},"children":[{"type":"element","tag":"code","props":{"code":"npm install ipx\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install ipx\n"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server/middleware/ipx.js"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"import { createIPX, createIPXMiddleware } from 'ipx'\n\n// https://github.com/unjs/ipx\nconst ipx = createIPX({\n  dir: '', // absolute path to images dir\n  domains: [], // allowed external domains (should match domains option in nuxt.config)\n  alias: {}, // base alias\n  sharp: {}, // sharp options\n})\n\nexport default createIPXMiddleware(ipx)\n","filename":"server/middleware/ipx.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { createIPX, createIPXMiddleware } from 'ipx'\n\n// https://github.com/unjs/ipx\nconst ipx = createIPX({\n  dir: '', // absolute path to images dir\n  domains: [], // allowed external domains (should match domains option in nuxt.config)\n  alias: {}, // base alias\n  sharp: {}, // sharp options\n})\n\nexport default createIPXMiddleware(ipx)\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_ipx"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"serverMiddleware"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"\nexport default {\n  serverMiddleware: {\n    '/_ipx': '~/server/middleware/ipx.js'\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nexport default {\n  serverMiddleware: {\n    '/_ipx': '~/server/middleware/ipx.js'\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"additional-modifiers"},"children":[{"type":"text","value":"Additional Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/ipx/#modifiers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"additional modifiers"}]},{"type":"text","value":" supported by IPX."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/image.png\" :modifiers=\"{ grayscale: true, tint: '#00DC82' }\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/image.png\" :modifiers=\"{ grayscale: true, tint: '#00DC82' }\" />\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"animated-images"},"children":[{"type":"text","value":"Animated Images"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is currently experimental. When using, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":" format is converted to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":"\n("},{"type":"element","tag":"a","props":{"href":"https://caniuse.com/webp","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"check browser support"}]},{"type":"text","value":"). Setting size is also not supported yet (check "},{"type":"element","tag":"a","props":{"href":"https://github.com/lovell/sharp/issues/2275","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lovell/sharp#2275"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/ipx/issues/35","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"unjs/ipx#35"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/image.gif\" :modifiers=\"{ animated: true }\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/image.gif\" :modifiers=\"{ animated: true }\" />\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image comes with a "},{"type":"element","tag":"a","props":{"href":"/getting-started/providers#default-provider"},"children":[{"type":"text","value":"preconfigured instance"}]},{"type":"text","value":" of "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/ipx","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":". An open source, self-hosted image optimizer based on "},{"type":"element","tag":"a","props":{"href":"https://github.com/lovell/sharp","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"sharp"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"using-ipx-in-production"},"children":[{"type":"text","value":"Using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" in production"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use IPX for self-hosting as an alternative to use service providers for production."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You don't need to follow this section if using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"target: 'static'"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"runtime-module"},"children":[{"type":"text","value":"Runtime Module"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Just add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" (instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buildModules"}]},{"type":"text","value":") in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":". This will ensure that the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_ipx"}]},{"type":"text","value":" endpoint continues to work in production."}]},{"type":"element","tag":"h3","props":{"id":"advanced-custom-servermiddleware"},"children":[{"type":"text","value":"Advanced: Custom ServerMiddleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have a use case of a custom IPX instance serving other that "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" dir, you may instead create a server Middleware that handles the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_ipx"}]},{"type":"text","value":" endpoint:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" as a dependency:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"yarn",":active":"true","active":true},"children":[{"type":"element","tag":"code","props":{"code":"yarn add ipx\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"yarn add ipx"}]}]}]}]}]}]},{"type":"element","tag":"code-block","props":{"label":"npm"},"children":[{"type":"element","tag":"code","props":{"code":"npm install ipx\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"npm install ipx"}]}]}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server/middleware/ipx.js"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"import { createIPX, createIPXMiddleware } from 'ipx'\n\n// https://github.com/unjs/ipx\nconst ipx = createIPX({\n  dir: '', // absolute path to images dir\n  domains: [], // allowed external domains (should match domains option in nuxt.config)\n  alias: {}, // base alias\n  sharp: {}, // sharp options\n})\n\nexport default createIPXMiddleware(ipx)\n","filename":"server/middleware/ipx.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-305413"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"createIPX"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"createIPXMiddleware"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-305413"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"'ipx'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a81cfd"},"children":[{"type":"text","value":"// https://github.com/unjs/ipx"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-305413"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2d099a"},"children":[{"type":"text","value":"ipx"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de7906"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-181259"},"children":[{"type":"text","value":"createIPX"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"dir"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a81cfd"},"children":[{"type":"text","value":"// absolute path to images dir"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"domains"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":": [], "}]},{"type":"element","tag":"span","props":{"class":"ct-a81cfd"},"children":[{"type":"text","value":"// allowed external domains (should match domains option in nuxt.config)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"alias"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":": {}, "}]},{"type":"element","tag":"span","props":{"class":"ct-a81cfd"},"children":[{"type":"text","value":"// base alias"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"sharp"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":": {}, "}]},{"type":"element","tag":"span","props":{"class":"ct-a81cfd"},"children":[{"type":"text","value":"// sharp options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-305413"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-305413"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-181259"},"children":[{"type":"text","value":"createIPXMiddleware"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"ipx"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_ipx"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"serverMiddleware"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"\nexport default {\n  serverMiddleware: {\n    '/_ipx': '~/server/middleware/ipx.js'\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-305413"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-305413"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"serverMiddleware"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"'/_ipx'"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"'~/server/middleware/ipx.js'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"additional-modifiers"},"children":[{"type":"text","value":"Additional Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/ipx/#modifiers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"additional modifiers"}]},{"type":"text","value":" supported by IPX."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/image.png\" :modifiers=\"{ grayscale: true, tint: '#00DC82' }\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e5017c"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"\"/image.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e5017c"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"\"{ grayscale: true, tint: '#00DC82' }\""}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"animated-images"},"children":[{"type":"text","value":"Animated Images"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is currently experimental. When using, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":" format is converted to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":"\n("},{"type":"element","tag":"a","props":{"href":"https://caniuse.com/webp","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"check browser support"}]},{"type":"text","value":"). Setting size is also not supported yet (check "},{"type":"element","tag":"a","props":{"href":"https://github.com/lovell/sharp/issues/2275","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lovell/sharp#2275"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/ipx/issues/35","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"unjs/ipx#35"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/image.gif\" :modifiers=\"{ animated: true }\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-c3aae8"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e5017c"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"\"/image.gif\""}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e5017c"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e0ff40"},"children":[{"type":"text","value":"\"{ animated: true }\""}]},{"type":"element","tag":"span","props":{"class":"ct-b9d259"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-e5017c{color:#D19A66}.ct-181259{color:#61AFEF}.ct-de7906{color:#56B6C2}.ct-2d099a{color:#E5C07B}.ct-a81cfd{color:#7F848E}.ct-e0ff40{color:#98C379}.ct-c3aae8{color:#E06C75}.ct-305413{color:#C678DD}.ct-b9d259{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-ipx-in-production","depth":2,"text":"Using ipx in production","children":[{"id":"runtime-module","depth":3,"text":"Runtime Module"},{"id":"advanced-custom-servermiddleware","depth":3,"text":"Advanced: Custom ServerMiddleware"}]},{"id":"additional-modifiers","depth":2,"text":"Additional Modifiers","children":[{"id":"animated-images","depth":3,"text":"Animated Images"}]}]}},"_type":"markdown","_id":"content:4.providers:ipx.md","_source":"content","_file":"4.providers/ipx.md","_extension":"md"}