[{"_path":"/_theme","_draft":false,"_partial":true,"title":"Nuxt Image","layout":"docs","url":"https://image.nuxtjs.org","description":"Optimized images for Nuxt.","socials":{"twitter":"nuxt_js","github":"nuxt/image"},"debug":false,"github":{"root":"docs/content","edit":true,"releases":false},"cover":{"src":"/cover.jpg","alt":"A screenshot of the Nuxt Image module."},"header":{"title":false,"logo":true},"footer":{"credits":{"icon":"IconDocus","text":"Powered by Docus","href":"https://docus.com"},"icons":[{"label":"NuxtJS","href":"https://nuxtjs.org","component":"IconNuxt"},{"label":"Vue Telescope","href":"https://vuetelescope.com","component":"IconVueTelescope"}]},"_id":"content:_theme.yml","_type":"yaml","_source":"content","_file":"_theme.yml","_extension":"yml"},{"_path":"/getting-started/installation","_draft":false,"_partial":false,"_empty":false,"title":"Installation","description":"Using image module in your Nuxt project is only one command away. ✨","excerpt":{"type":"root","children":[{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You are reading the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v0"}]},{"type":"text","value":" documentation compatible with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 2"}]},{"type":"text","value":". Check out "},{"type":"element","tag":"a","props":{"href":"https://v1.image.nuxtjs.org/get-started","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"v1.image.nuxtjs.org"}]},{"type":"text","value":" for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" support. ("},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/discussions/548","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Announcement"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" devDependency to your project:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add --dev @nuxt/image@v0\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add --dev @nuxt/image@v0\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install -D @nuxt/image@v0\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install -D @nuxt/image@v0\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add the module to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buildModules"}]},{"type":"text","value":" in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n target: 'static',\n buildModules: [\n '@nuxt/image',\n ]\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n target: 'static',\n buildModules: [\n '@nuxt/image',\n ]\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" target (default) and are using the default provider, 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":" section instead:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n modules: [\n '@nuxt/image',\n ]\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n modules: [\n '@nuxt/image',\n ]\n}\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can now start using "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-picture"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"text","value":" components in your Nuxt app ✨"}]}]},{"type":"element","tag":"h2","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" section in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // Options\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n // Options\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/api/options"},"children":[{"type":"text","value":"module options"}]},{"type":"text","value":" for available options."}]},{"type":"element","tag":"h2","props":{"id":"typescript"},"children":[{"type":"text","value":"TypeScript"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using Typescript, add the types to your \"types\" array in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsconfig.json"}]},{"type":"text","value":" after the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/types"}]},{"type":"text","value":" (Nuxt 2.9.0+) or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/vue-app"}]},{"type":"text","value":" entry."}]},{"type":"element","tag":"code","props":{"code":"{\n \"compilerOptions\": {\n \"types\": [\"@nuxt/types\", \"@nuxt/image\"]\n }\n}\n","filename":"tsconfig.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"compilerOptions\": {\n \"types\": [\"@nuxt/types\", \"@nuxt/image\"]\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"upgrading"},"children":[{"type":"text","value":"Upgrading"}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Behavior and API changes might happen in 0.x releases of image module. Update with caution."}]}]},{"type":"element","tag":"h2","props":{"id":"troubleshooting"},"children":[{"type":"text","value":"Troubleshooting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If an error occurs during installation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure using LTS version of NodeJS or latest update of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"12.x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"14.x"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"16.x"}]},{"type":"text","value":" ("},{"type":"element","tag":"a","props":{"href":"https://nodejs.org/en/download/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NodeJS Downloads page"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try to upgrade to latest versions:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn upgrade @nuxt/image\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn upgrade @nuxt/image\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm up @nuxt/image\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm up @nuxt/image\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try recreating lock-file:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"rm yarn.lock && yarn\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"rm yarn.lock && yarn\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"rm package-lock.json && npm i\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"rm package-lock.json && npm i\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If there is still an error related to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":", it is is probably becase your OS architecture or NodeJS version is not included in pre-built binaries and needs to built from source (for example, this sometimes occurs on Apple M1). Checkout "},{"type":"element","tag":"a","props":{"href":"https://github.com/nodejs/node-gyp#installation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":" for install requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If none of the above worked, please "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"open an issue"}]},{"type":"text","value":" and include error trace, OS, Node version and the package manager used for installing."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You are reading the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v0"}]},{"type":"text","value":" documentation compatible with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 2"}]},{"type":"text","value":". Check out "},{"type":"element","tag":"a","props":{"href":"https://v1.image.nuxtjs.org/get-started","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"v1.image.nuxtjs.org"}]},{"type":"text","value":" for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" support. ("},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/discussions/548","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Announcement"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/image"}]},{"type":"text","value":" devDependency to your project:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add --dev @nuxt/image@v0\n","filename":"yarn","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-ad13a9"},"children":[{"type":"text","value":"yarn add --dev @nuxt/image@v0"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install -D @nuxt/image@v0\n","filename":"npm","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-ad13a9"},"children":[{"type":"text","value":"npm install -D @nuxt/image@v0"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add the module to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buildModules"}]},{"type":"text","value":" in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n target: 'static',\n buildModules: [\n '@nuxt/image',\n ]\n}\n","filename":"nuxt.config.js","language":"ts"},"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-e9b8cc"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"target"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"'static'"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"buildModules"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"'@nuxt/image'"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" target (default) and are using the default provider, 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":" section instead:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n modules: [\n '@nuxt/image',\n ]\n}\n","filename":"nuxt.config.js","language":"ts"},"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-e9b8cc"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"'@nuxt/image'"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can now start using "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-picture"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"text","value":" components in your Nuxt app ✨"}]}]},{"type":"element","tag":"h2","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" section in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // Options\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-e9b8cc"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9b8cc"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-077a9c"},"children":[{"type":"text","value":"// Options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/api/options"},"children":[{"type":"text","value":"module options"}]},{"type":"text","value":" for available options."}]},{"type":"element","tag":"h2","props":{"id":"typescript"},"children":[{"type":"text","value":"TypeScript"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using Typescript, add the types to your \"types\" array in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsconfig.json"}]},{"type":"text","value":" after the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/types"}]},{"type":"text","value":" (Nuxt 2.9.0+) or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/vue-app"}]},{"type":"text","value":" entry."}]},{"type":"element","tag":"code","props":{"code":"{\n \"compilerOptions\": {\n \"types\": [\"@nuxt/types\", \"@nuxt/image\"]\n }\n}\n","filename":"tsconfig.json","language":"json"},"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-ad13a9"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"\"compilerOptions\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a540ab"},"children":[{"type":"text","value":"\"types\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"\"@nuxt/types\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-89f603"},"children":[{"type":"text","value":"\"@nuxt/image\""}]},{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ad13a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"upgrading"},"children":[{"type":"text","value":"Upgrading"}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Behavior and API changes might happen in 0.x releases of image module. Update with caution."}]}]},{"type":"element","tag":"h2","props":{"id":"troubleshooting"},"children":[{"type":"text","value":"Troubleshooting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If an error occurs during installation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure using LTS version of NodeJS or latest update of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"12.x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"14.x"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"16.x"}]},{"type":"text","value":" ("},{"type":"element","tag":"a","props":{"href":"https://nodejs.org/en/download/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NodeJS Downloads page"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try to upgrade to latest versions:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn upgrade @nuxt/image\n","filename":"yarn","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-ad13a9"},"children":[{"type":"text","value":"yarn upgrade @nuxt/image"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"npm up @nuxt/image\n","filename":"npm","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-ad13a9"},"children":[{"type":"text","value":"npm up @nuxt/image"}]}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try recreating lock-file:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"rm yarn.lock && yarn\n","filename":"yarn","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-ad13a9"},"children":[{"type":"text","value":"rm yarn.lock && yarn"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"rm package-lock.json && npm i\n","filename":"npm","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-ad13a9"},"children":[{"type":"text","value":"rm package-lock.json && npm i"}]}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If there is still an error related to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":", it is is probably becase your OS architecture or NodeJS version is not included in pre-built binaries and needs to built from source (for example, this sometimes occurs on Apple M1). Checkout "},{"type":"element","tag":"a","props":{"href":"https://github.com/nodejs/node-gyp#installation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"node-gyp"}]},{"type":"text","value":" for install requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If none of the above worked, please "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"open an issue"}]},{"type":"text","value":" and include error trace, OS, Node version and the package manager used for installing."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-077a9c{color:#7F848E}.ct-89f603{color:#98C379}.ct-a540ab{color:#E06C75}.ct-e9b8cc{color:#C678DD}.ct-ad13a9{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"configuration","depth":2,"text":"Configuration"},{"id":"typescript","depth":2,"text":"TypeScript"},{"id":"upgrading","depth":2,"text":"Upgrading"},{"id":"troubleshooting","depth":2,"text":"Troubleshooting"}]}},"_type":"markdown","_id":"content:1.getting-started:1.installation.md","_source":"content","_file":"1.getting-started/1.installation.md","_extension":"md"},{"_path":"/getting-started/providers","_draft":false,"_partial":false,"_empty":false,"title":"Providers","description":"Nuxt Image supports multiple providers for high performances.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Providers are integrations between Nuxt Image and third-party image transformation services. Each provider is responsible for generating correct URLs for that image transformation service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image can be configured to work with any external image transformation service. Checkout sidebar for list of preconfigured providers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are looking for a specific provider that is not already supported, you can "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"create your own provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image will automatically optimize "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" sources and accepts all "},{"type":"element","tag":"a","props":{"href":"/api/options/"},"children":[{"type":"text","value":"options"}]},{"type":"text","value":" for specified target, except for modifiers that are specific to other providers."}]},{"type":"element","tag":"h2","props":{"id":"default-provider"},"children":[{"type":"text","value":"Default Provider"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default provider for Nuxt Image is "},{"type":"element","tag":"a","props":{"href":"/providers/ipx"},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/getting-started/static"},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" (for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"target: static"}]},{"type":"text","value":"). Either option can be used without any configuration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/features/deployment-targets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Learn more about Nuxt deployment targets"}]}]},{"type":"element","tag":"h3","props":{"id":"local-images"},"children":[{"type":"text","value":"Local Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should be stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory of your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, when using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":", it should be placed in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" folder under the path "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/nuxt-icon.png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/"}]},{"type":"text","value":" directory are "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" proccessed with Nuxt Image because those images are managed by webpack."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information, you can learn more about the "},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/directory-structure/static","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"static directory here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"remote-images"},"children":[{"type":"text","value":"Remote Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using default provider, you can also optimize external URLs. For this, you need to add them to "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"environment-detection"},"children":[{"type":"text","value":"Environment Detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default provider using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NUXT_IMAGE_PROVIDER"}]},{"type":"text","value":" environment variable. Providers below, are automatically detected:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/providers/vercel"},"children":[{"type":"text","value":"Vercel"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Providers are integrations between Nuxt Image and third-party image transformation services. Each provider is responsible for generating correct URLs for that image transformation service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image can be configured to work with any external image transformation service. Checkout sidebar for list of preconfigured providers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are looking for a specific provider that is not already supported, you can "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"create your own provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image will automatically optimize "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" sources and accepts all "},{"type":"element","tag":"a","props":{"href":"/api/options/"},"children":[{"type":"text","value":"options"}]},{"type":"text","value":" for specified target, except for modifiers that are specific to other providers."}]},{"type":"element","tag":"h2","props":{"id":"default-provider"},"children":[{"type":"text","value":"Default Provider"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default provider for Nuxt Image is "},{"type":"element","tag":"a","props":{"href":"/providers/ipx"},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/getting-started/static"},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" (for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"target: static"}]},{"type":"text","value":"). Either option can be used without any configuration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/features/deployment-targets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Learn more about Nuxt deployment targets"}]}]},{"type":"element","tag":"h3","props":{"id":"local-images"},"children":[{"type":"text","value":"Local Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should be stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory of your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, when using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":", it should be placed in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" folder under the path "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/nuxt-icon.png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/"}]},{"type":"text","value":" directory are "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" proccessed with Nuxt Image because those images are managed by webpack."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information, you can learn more about the "},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/directory-structure/static","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"static directory here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"remote-images"},"children":[{"type":"text","value":"Remote Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using default provider, you can also optimize external URLs. For this, you need to add them to "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"environment-detection"},"children":[{"type":"text","value":"Environment Detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default provider using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NUXT_IMAGE_PROVIDER"}]},{"type":"text","value":" environment variable. Providers below, are automatically detected:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/providers/vercel"},"children":[{"type":"text","value":"Vercel"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"default-provider","depth":2,"text":"Default Provider","children":[{"id":"local-images","depth":3,"text":"Local Images"},{"id":"remote-images","depth":3,"text":"Remote Images"},{"id":"environment-detection","depth":3,"text":"Environment Detection"}]}]}},"_type":"markdown","_id":"content:1.getting-started:2.providers.md","_source":"content","_file":"1.getting-started/2.providers.md","_extension":"md"},{"_path":"/getting-started/static","_draft":false,"_partial":false,"_empty":false,"title":"Static Images","description":"Optimizing images for static websites.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are building a static site Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. (This only works with server-side rendered pages. If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssr: false"}]},{"type":"text","value":", won't work)"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider=\"static\""}]},{"type":"text","value":" directly. (See "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"text","value":"component documentation"}]},{"type":"text","value":" for more information.)"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are building a static site Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. (This only works with server-side rendered pages. If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssr: false"}]},{"type":"text","value":", won't work)"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider=\"static\""}]},{"type":"text","value":" directly. (See "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"text","value":"component documentation"}]},{"type":"text","value":" for more information.)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.getting-started:3.static.md","_source":"content","_file":"1.getting-started/3.static.md","_extension":"md"},{"_path":"/components/nuxt-img","_draft":false,"_partial":false,"_empty":false,"title":"","description":"Discover how to use and configure the nuxt-img component.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Uses built-in provider to optimize local and remote images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Converts "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" to provider optimized URLs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Automatically resizes images based on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generates responsive sizes when providing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" option"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Supports native lazy loading as well as other "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" attributes"}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" outputs a native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" tag directly (without any wrapper around it). Use it like you would use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Will result in:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With "},{"type":"element","tag":"a","props":{"href":"/getting-started/providers#default-provider"},"children":[{"type":"text","value":"default provider"}]},{"type":"text","value":", you should put "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/nuxt-icon.png"}]},{"type":"text","value":" inside "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory to make the above example work."}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"h3","props":{"id":"src"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Path to image file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" should be in the form of an absolute path for static images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory.\nOtherwise path that is expected by provider that starts with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]},{"type":"text","value":" or a URL."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For image optimization when using external urls in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":", we need to whitelist them using "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"placeholder"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"placeholder"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display a placeholder image before the actual image is fully loaded."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case."}]},{"type":"element","tag":"code","props":{"code":"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Follow the roadmap for the placeholder prop "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues/189","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"h3","props":{"id":"width--height"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" / "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify width/height of the image."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use desired width/height for static sized images like icons or avatars"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use original image width/height for responsive images (when using "},{"type":"element","tag":"a","props":{"href":"#sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"h3","props":{"id":"sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify responsive sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This a space-separated list of screen size/width pairs. You can "},{"type":"element","tag":"a","props":{"href":"/api/options#screens"},"children":[{"type":"text","value":"see a list of the defined screen sizes here"}]},{"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":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use other provider instead of default "},{"type":"element","tag":"a","props":{"href":"/api/options#provider"},"children":[{"type":"text","value":"provider option"}]},{"type":"text","value":" specified in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: \"https://res.cloudinary.com/nuxt/image/upload/\",\n },\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":"export default {\n image: {\n cloudinary: {\n baseURL: \"https://res.cloudinary.com/nuxt/image/upload/\",\n },\n },\n};\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"preset"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can define presets using "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"presets option"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n presets: {\n cover: {\n modifiers: {\n fit: \"cover\",\n format: \"jpg\",\n width: 300,\n height: 300,\n },\n },\n },\n },\n};\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n presets: {\n cover: {\n modifiers: {\n fit: \"cover\",\n format: \"jpg\",\n width: 300,\n height: 300,\n },\n },\n },\n },\n};\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to serve images in a specific format, use this prop."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Available formats are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":". If the format is not specified, it will respect the default image format."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The quality for the generated image(s)."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property specifies the size of the images.\nThere are five standard values you can use with this property."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": Preserving aspect ratio, contain within both provided dimensions using \"letterboxing\" where necessary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": Ignore the aspect ratio of the input and stretch to both provided dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified."}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some providers support other values"}]}]},{"type":"element","tag":"h3","props":{"id":"modifiers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard modifiers, each provider might have its own additional modifiers. Because these modifiers depend on the provider, refer to its documentation to know what can be used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop lets you use any of these transformations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"preload"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preload"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to preload the image, use this prop. This will place a corresponding "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"link"}]},{"type":"text","value":" tag in the page's head."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"loading"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"native"}]},{"type":"text","value":" attribute that provides a hint\nto the browser on how to handle the loading of an image which is outside the viewport.\nIt is "},{"type":"element","tag":"a","props":{"href":"https://caniuse.com/loading-lazy-attr","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"supported"}]},{"type":"text","value":" by the latest version of all major browsers since March 2022."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading=\"lazy\""}]},{"type":"text","value":" to defer loading of an image until it appears in the viewport."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"events"},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Native events emitted by the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" element contained by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" components are re-emitted and can be listened to."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Listen to the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLoad"}]},{"type":"text","value":" event from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Uses built-in provider to optimize local and remote images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Converts "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" to provider optimized URLs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Automatically resizes images based on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generates responsive sizes when providing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" option"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Supports native lazy loading as well as other "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" attributes"}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" outputs a native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" tag directly (without any wrapper around it). Use it like you would use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Will result in:"}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With "},{"type":"element","tag":"a","props":{"href":"/getting-started/providers#default-provider"},"children":[{"type":"text","value":"default provider"}]},{"type":"text","value":", you should put "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/nuxt-icon.png"}]},{"type":"text","value":" inside "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory to make the above example work."}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"h3","props":{"id":"src"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Path to image file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" should be in the form of an absolute path for static images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory.\nOtherwise path that is expected by provider that starts with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]},{"type":"text","value":" or a URL."}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For image optimization when using external urls in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":", we need to whitelist them using "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"placeholder"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"placeholder"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display a placeholder image before the actual image is fully loaded."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case."}]},{"type":"element","tag":"code","props":{"code":"\n\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-7b99cb"},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\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-7b99cb"},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":":placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"[100, 50, 10]\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\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-7b99cb"},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":":placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"15\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\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-7b99cb"},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"./placeholder.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Follow the roadmap for the placeholder prop "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues/189","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"h3","props":{"id":"width--height"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" / "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify width/height of the image."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use desired width/height for static sized images like icons or avatars"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use original image width/height for responsive images (when using "},{"type":"element","tag":"a","props":{"href":"#sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"h3","props":{"id":"sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify responsive sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This a space-separated list of screen size/width pairs. You can "},{"type":"element","tag":"a","props":{"href":"/api/options#screens"},"children":[{"type":"text","value":"see a list of the defined screen sizes here"}]},{"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":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/logos/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"sm:100vw md:50vw lg:400px\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use other provider instead of default "},{"type":"element","tag":"a","props":{"href":"/api/options#provider"},"children":[{"type":"text","value":"provider option"}]},{"type":"text","value":" specified in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"169\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: \"https://res.cloudinary.com/nuxt/image/upload/\",\n },\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":"ct-cdcb4b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cdcb4b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"cloudinary"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"https://res.cloudinary.com/nuxt/image/upload/\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"};"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"preset"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can define presets using "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"presets option"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"preset"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cover\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n presets: {\n cover: {\n modifiers: {\n fit: \"cover\",\n format: \"jpg\",\n width: 300,\n height: 300,\n },\n },\n },\n },\n};\n","filename":"nuxt.config.js","language":"ts"},"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-cdcb4b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cdcb4b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"presets"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"cover"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cover\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"jpg\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"300"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"300"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"};"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to serve images in a specific format, use this prop."}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"webp\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Available formats are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":". If the format is not specified, it will respect the default image format."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The quality for the generated image(s)."}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.jpg\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"80\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"200\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"100\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property specifies the size of the images.\nThere are five standard values you can use with this property."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": Preserving aspect ratio, contain within both provided dimensions using \"letterboxing\" where necessary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": Ignore the aspect ratio of the input and stretch to both provided dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified."}]}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cover\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"200\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"100\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some providers support other values"}]}]},{"type":"element","tag":"h3","props":{"id":"modifiers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard modifiers, each provider might have its own additional modifiers. Because these modifiers depend on the provider, refer to its documentation to know what can be used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop lets you use any of these transformations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"169\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"{ roundCorner: '0:100' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"preload"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preload"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to preload the image, use this prop. This will place a corresponding "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"link"}]},{"type":"text","value":" tag in the page's head."}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"preload"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"loading"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"native"}]},{"type":"text","value":" attribute that provides a hint\nto the browser on how to handle the loading of an image which is outside the viewport.\nIt is "},{"type":"element","tag":"a","props":{"href":"https://caniuse.com/loading-lazy-attr","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"supported"}]},{"type":"text","value":" by the latest version of all major browsers since March 2022."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading=\"lazy\""}]},{"type":"text","value":" to defer loading of an image until it appears in the viewport."}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"loading"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"lazy\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"events"},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Native events emitted by the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" element contained by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" components are re-emitted and can be listened to."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Listen to the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLoad"}]},{"type":"text","value":" event from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code","props":{"code":"\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/images/colors.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"@load"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"doSomethingOnLoad\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-cdcb4b{color:#C678DD}.ct-7b99cb{color:#7F848E}.ct-3af93b{color:#98C379}.ct-ad1d49{color:#D19A66}.ct-4641a2{color:#E06C75}.ct-58809a{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage"},{"id":"props","depth":2,"text":"Props","children":[{"id":"src","depth":3,"text":"src"},{"id":"placeholder","depth":3,"text":"placeholder"},{"id":"width--height","depth":3,"text":"width / height"},{"id":"sizes","depth":3,"text":"sizes"},{"id":"provider","depth":3,"text":"provider"},{"id":"preset","depth":3,"text":"preset"},{"id":"format","depth":3,"text":"format"},{"id":"quality","depth":3,"text":"quality"},{"id":"fit","depth":3,"text":"fit"},{"id":"modifiers","depth":3,"text":"modifiers"},{"id":"preload","depth":3,"text":"preload"},{"id":"loading","depth":3,"text":"loading"}]},{"id":"events","depth":2,"text":"Events"}]}},"_type":"markdown","_id":"content:2.components:1.nuxt-img.md","_source":"content","_file":"2.components/1.nuxt-img.md","_extension":"md"},{"_path":"/components/nuxt-picture","_draft":false,"_partial":false,"_empty":false,"title":"","description":"Discover how to use and configure the nuxt-picture component.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" is almost identical to "},{"type":"element","tag":"a","props":{"href":"nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"text","value":"\nbut also allows serving modern formats like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" when possible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about the "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag on MDN"}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See props supported by "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#props"},"children":[{"type":"text","value":"nuxt-img"}]}]}]},{"type":"element","tag":"h3","props":{"id":"legacyformat"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"legacyFormat"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Format used for fallback. Default is conditional:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If original format supports transparency ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":"), "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":" is used for fallback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Otherwise "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" is used for fallback"}]}]},{"type":"element","tag":"h3","props":{"id":"imgattrs"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imgAttrs"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Allows you to set additional HTML-attributes on the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" element."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" is almost identical to "},{"type":"element","tag":"a","props":{"href":"nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"text","value":"\nbut also allows serving modern formats like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" when possible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about the "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" tag on MDN"}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See props supported by "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#props"},"children":[{"type":"text","value":"nuxt-img"}]}]}]},{"type":"element","tag":"h3","props":{"id":"legacyformat"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"legacyFormat"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Format used for fallback. Default is conditional:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If original format supports transparency ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":"), "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":" is used for fallback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Otherwise "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" is used for fallback"}]}]},{"type":"element","tag":"h3","props":{"id":"imgattrs"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imgAttrs"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Allows you to set additional HTML-attributes on the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" element."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"\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-373c4d"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ef15f5"},"children":[{"type":"text","value":"nuxt-picture"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-016dbb"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-320411"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-016dbb"},"children":[{"type":"text","value":":imgAttrs"}]},{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-320411"},"children":[{"type":"text","value":"\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-320411{color:#98C379}.ct-016dbb{color:#D19A66}.ct-ef15f5{color:#E06C75}.ct-373c4d{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"props","depth":2,"text":"Props","children":[{"id":"legacyformat","depth":3,"text":"legacyFormat"},{"id":"imgattrs","depth":3,"text":"imgAttrs"}]}]}},"_type":"markdown","_id":"content:2.components:2.nuxt-picture.md","_source":"content","_file":"2.components/2.nuxt-picture.md","_extension":"md"},{"_path":"/api/_dir","_draft":false,"_partial":true,"title":"API","_id":"content:3.api:_dir.yml","_type":"yaml","_source":"content","_file":"3.api/_dir.yml","_extension":"yml"},{"_path":"/api/options","_draft":false,"_partial":false,"_empty":false,"title":"Module Options","description":"Nuxt Image is configured with sensible defaults.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To configure the image module and customize its behavior, you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" property in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // Options\n }\n}\n","filename":"nuxt.config","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n // Options\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"screens"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screens"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List of predefined screen sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These sizes will be used to generate resized and optimized versions of an image (for example, with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" modifier)."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // The screen sizes predefined by `@nuxt/image`:\n screens: {\n xs: 320,\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n xxl: 1536,\n '2xl': 1536\n },\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n // The screen sizes predefined by `@nuxt/image`:\n screens: {\n xs: 320,\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n xxl: 1536,\n '2xl': 1536\n },\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enable image optimization on an external website, specify which domains are allowed to be optimized. This option will be used to detect whether a remote image should be optimized or not. This is needed to ensure that external urls can't be abused."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n domains: ['nuxtjs.org']\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n domains: ['nuxtjs.org']\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"presets"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"presets"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n presets: {\n avatar: {\n modifiers: {\n format: 'jpg',\n width: 50,\n height: 50\n }\n }\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n presets: {\n avatar: {\n modifiers: {\n format: 'jpg',\n width: 50,\n height: 50\n }\n }\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"providers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to create and use a "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"custom provider"}]},{"type":"text","value":", you need to use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":" option and define your custom providers."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n providers: {\n random: {\n provider: '~/providers/random',\n options: {}\n }\n }\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":"export default {\n image: {\n providers: {\n random: {\n provider: '~/providers/random',\n options: {}\n }\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can specify default provider to be used when not specified in component or when calling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n provider: 'twicpics',\n twicpics: {\n baseURL: 'https://nuxt-demo.twic.pics'\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n provider: 'twicpics',\n twicpics: {\n baseURL: 'https://nuxt-demo.twic.pics'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"modifiers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default modifiers for the selected provider."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n provider: 'cloudinary',\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/fetch/',\n modifiers: {\n effect: 'sharpen:100',\n quality: 'auto:best',\n }\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n provider: 'cloudinary',\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/fetch/',\n modifiers: {\n effect: 'sharpen:100',\n quality: 'auto:best',\n }\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"staticfilename"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"staticFilename"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use this option to change filename and location for the static image generation."}]},{"type":"element","tag":"h3","props":{"id":"parameters"},"children":[{"type":"text","value":"Parameters"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[name]"}]},{"type":"text","value":": Only filename, without extension or path"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[hash]"}]},{"type":"text","value":": The hash of url"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[ext]"}]},{"type":"text","value":": Extension with leading dot "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".png"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[publicPath]"}]},{"type":"text","value":": Default is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"build.publicPath"}]},{"type":"text","value":" ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_nuxt"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // Generate images to `/_nuxt/image/file.png`\n staticFilename: '[publicPath]/images/[name]-[hash][ext]'\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n // Generate images to `/_nuxt/image/file.png`\n staticFilename: '[publicPath]/images/[name]-[hash][ext]'\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"dir"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify the location of the source images when using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example you might want the source images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/images"}]},{"type":"text","value":" directory rather than the default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" directory so the source images don't get copied into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dist"}]},{"type":"text","value":" and deployed:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n dir: 'assets/images'\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n dir: 'assets/images'\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Notes:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" causes 404 errors."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider, make sure to deploy customized "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" as well."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For some providers (like vercel), using a directory other than "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory (deployment URL)"}]}]},{"type":"element","tag":"h2","props":{"id":"alias"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alias"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify aliases for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the default ipx provider, URL aliases are shortened on the server-side.\nThis is especially useful for optimizing external URLs and not including them in HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using other providers, aliases are resolved in runtime and included in HTML. (only the usage is simplified)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n domains: [\n 'images.unsplash.com'\n ],\n alias: {\n unsplash: 'https://images.unsplash.com'\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n image: {\n domains: [\n 'images.unsplash.com'\n ],\n alias: {\n unsplash: 'https://images.unsplash.com'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Before"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"\">\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\">\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"After"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both usage and output are simplified!"}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To configure the image module and customize its behavior, you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" property in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // Options\n }\n}\n","filename":"nuxt.config","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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-424f07"},"children":[{"type":"text","value":"// Options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"screens"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screens"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List of predefined screen sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These sizes will be used to generate resized and optimized versions of an image (for example, with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" modifier)."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // The screen sizes predefined by `@nuxt/image`:\n screens: {\n xs: 320,\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n xxl: 1536,\n '2xl': 1536\n },\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-424f07"},"children":[{"type":"text","value":"// The screen sizes predefined by `@nuxt/image`:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"screens"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"xs"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"320"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"sm"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"640"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"md"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"768"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"lg"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1024"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"xl"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1280"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"xxl"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1536"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'2xl'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1536"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enable image optimization on an external website, specify which domains are allowed to be optimized. This option will be used to detect whether a remote image should be optimized or not. This is needed to ensure that external urls can't be abused."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n domains: ['nuxtjs.org']\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"domains"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'nuxtjs.org'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"presets"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"presets"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n presets: {\n avatar: {\n modifiers: {\n format: 'jpg',\n width: 50,\n height: 50\n }\n }\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"presets"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"avatar"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'jpg'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"50"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"50"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"preset"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"avatar\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":""}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"providers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to create and use a "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"custom provider"}]},{"type":"text","value":", you need to use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":" option and define your custom providers."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n providers: {\n random: {\n provider: '~/providers/random',\n options: {}\n }\n }\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":"ct-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"providers"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"random"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'~/providers/random'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"index.vue","language":"vue"},"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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"random\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"main.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"300\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"169\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":""}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can specify default provider to be used when not specified in component or when calling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n provider: 'twicpics',\n twicpics: {\n baseURL: 'https://nuxt-demo.twic.pics'\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'twicpics'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"twicpics"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'https://nuxt-demo.twic.pics'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"modifiers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default modifiers for the selected provider."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n provider: 'cloudinary',\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/fetch/',\n modifiers: {\n effect: 'sharpen:100',\n quality: 'auto:best',\n }\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'cloudinary'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"cloudinary"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'https://res.cloudinary.com//image/fetch/'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"effect"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'sharpen:100'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'auto:best'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"staticfilename"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"staticFilename"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use this option to change filename and location for the static image generation."}]},{"type":"element","tag":"h3","props":{"id":"parameters"},"children":[{"type":"text","value":"Parameters"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[name]"}]},{"type":"text","value":": Only filename, without extension or path"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[hash]"}]},{"type":"text","value":": The hash of url"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[ext]"}]},{"type":"text","value":": Extension with leading dot "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".png"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[publicPath]"}]},{"type":"text","value":": Default is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"build.publicPath"}]},{"type":"text","value":" ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_nuxt"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n // Generate images to `/_nuxt/image/file.png`\n staticFilename: '[publicPath]/images/[name]-[hash][ext]'\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-424f07"},"children":[{"type":"text","value":"// Generate images to `/_nuxt/image/file.png`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"staticFilename"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'[publicPath]/images/[name]-[hash][ext]'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"dir"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify the location of the source images when using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example you might want the source images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/images"}]},{"type":"text","value":" directory rather than the default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" directory so the source images don't get copied into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dist"}]},{"type":"text","value":" and deployed:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n dir: 'assets/images'\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"dir"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'assets/images'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Notes:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" causes 404 errors."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider, make sure to deploy customized "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" as well."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For some providers (like vercel), using a directory other than "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory (deployment URL)"}]}]},{"type":"element","tag":"h2","props":{"id":"alias"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alias"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify aliases for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the default ipx provider, URL aliases are shortened on the server-side.\nThis is especially useful for optimizing external URLs and not including them in HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using other providers, aliases are resolved in runtime and included in HTML. (only the usage is simplified)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n domains: [\n 'images.unsplash.com'\n ],\n alias: {\n unsplash: 'https://images.unsplash.com'\n }\n }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"domains"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'images.unsplash.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"alias"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"unsplash"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'https://images.unsplash.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Before"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"\" />\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"https://images.unsplash.com/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"\">\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/_ipx/https://images.unsplash.com/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"After"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"\" />\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/unsplash/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"\" />\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/_ipx/unsplash/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both usage and output are simplified!"}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b058bd{color:#FFFFFF}.ct-86af46{color:#98C379}.ct-faec20{color:#D19A66}.ct-424f07{color:#7F848E}.ct-dee0f5{color:#E06C75}.ct-55599e{color:#ABB2BF}.ct-411fa4{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"screens","depth":2,"text":"screens"},{"id":"domains","depth":2,"text":"domains"},{"id":"presets","depth":2,"text":"presets"},{"id":"providers","depth":2,"text":"providers"},{"id":"provider","depth":2,"text":"provider","children":[{"id":"modifiers","depth":3,"text":"modifiers"}]},{"id":"staticfilename","depth":2,"text":"staticFilename","children":[{"id":"parameters","depth":3,"text":"Parameters"}]},{"id":"dir","depth":2,"text":"dir"},{"id":"alias","depth":2,"text":"alias"}]}},"_type":"markdown","_id":"content:3.api:1.options.md","_source":"content","_file":"3.api/1.options.md","_extension":"md"},{"_path":"/api/dollarimg","_draft":false,"_partial":false,"_empty":false,"title":"$img utility","description":"Using $img utility to generate provider specific URLs.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it's required to directly use a generated image URL with applied transformations instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" components."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"code","props":{"code":"$img(src, modifiers, options)\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$img(src, modifiers, options)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Generate image URL for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"backgroundImage"}]},{"type":"text","value":" style."}]},{"type":"element","tag":"code","props":{"code":"export default {\n computed: {\n backgroundStyles() {\n const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })\n return {\n backgroundImage: `url('${imgUrl}')`\n }\n }\n }\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n computed: {\n backgroundStyles() {\n const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })\n return {\n backgroundImage: `url('${imgUrl}')`\n }\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"imggetsizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img.getSizes"}]}]},{"type":"element","tag":"code","props":{"code":"$img.getSizes(src, { sizes, modifiers });\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$img.getSizes(src, { sizes, modifiers });\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unstable: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getSizes"}]},{"type":"text","value":" API might change or be removed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Parameters:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":": (string) Source to original image id"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":": (string) List of responsive image sizes ({breakpoint}:{size}{unit})"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":": (object) Modifiers passed to provider for resizing and optimizing"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":": resize to the specified width (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":": resize to specified height (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":": Change image quality (0 to 100)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": Change the image format"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"(any other custom provider modifier)"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":": (object)"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]},{"type":"text","value":": (string) Provider name other than default (see "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/api/options#providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]},{"type":"text","value":": Use a "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"preset"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Responsive srcset with Vuetify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v-img"}]}]},{"type":"element","tag":"code","props":{"code":"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it's required to directly use a generated image URL with applied transformations instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" components."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"code","props":{"code":"$img(src, modifiers, options)\n","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-fdc5c3"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Generate image URL for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"backgroundImage"}]},{"type":"text","value":" style."}]},{"type":"element","tag":"code","props":{"code":"export default {\n computed: {\n backgroundStyles() {\n const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })\n return {\n backgroundImage: `url('${imgUrl}')`\n }\n }\n }\n}\n","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-26ef91"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"backgroundStyles"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"imgUrl"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d2cd6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'https://github.com/nuxt.png'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"backgroundImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"`url('"}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"imgUrl"}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"')`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"imggetsizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img.getSizes"}]}]},{"type":"element","tag":"code","props":{"code":"$img.getSizes(src, { sizes, modifiers });\n","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-fa90f1"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"getSizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unstable: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getSizes"}]},{"type":"text","value":" API might change or be removed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Parameters:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":": (string) Source to original image id"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":": (string) List of responsive image sizes ({breakpoint}:{size}{unit})"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":": (object) Modifiers passed to provider for resizing and optimizing"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":": resize to the specified width (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":": resize to specified height (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":": Change image quality (0 to 100)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": Change the image format"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"(any other custom provider modifier)"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":": (object)"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]},{"type":"text","value":": (string) Provider name other than default (see "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/api/options#providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]},{"type":"text","value":": Use a "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"preset"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Responsive srcset with Vuetify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v-img"}]}]},{"type":"element","tag":"code","props":{"code":"\n\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-fc6d59"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"v-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":lazy-src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"$img(src, { width: 10, quality: 70 })\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"$img(src, { height, quality: 70 })\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":srcset"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"_srcset.srcset\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"height\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"_srcset.sizes\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": { "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'/img/header-bg.jpg'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"_srcset"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"getSizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'webp'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"70"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-4615bd{color:#D19A66}.ct-62ce00{color:#98C379}.ct-8d2cd6{color:#56B6C2}.ct-fa90f1{color:#E5C07B}.ct-26ef91{color:#C678DD}.ct-1e5d94{color:#E06C75}.ct-fc6d59{color:#ABB2BF}.ct-fdc5c3{color:#61AFEF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"imggetsizes","depth":3,"text":"$img.getSizes"}]}]}},"_type":"markdown","_id":"content:3.api:2.$img.md","_source":"content","_file":"3.api/2.$img.md","_extension":"md"},{"_path":"/providers/cloudflare","_draft":false,"_partial":false,"_empty":false,"title":"Cloudflare","description":"Nuxt Image has first class integration with Cloudflare","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://developers.cloudflare.com/images/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudflare"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Availability only for Business and Enterprise Customers. Normally Cloudflare "},{"type":"element","tag":"a","props":{"href":"https://pages.cloudflare.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" users can already benefit from build-time image optimization."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url (zone) of your service:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n baseURL: 'https://that-test.site'\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":"export default {\n image: {\n baseURL: 'https://that-test.site'\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your deployment's domain (zone)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/cdn-cgi/image/"}]},{"type":"text","value":" will be automatically appended for generating URLs."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://developers.cloudflare.com/images/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudflare"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Availability only for Business and Enterprise Customers. Normally Cloudflare "},{"type":"element","tag":"a","props":{"href":"https://pages.cloudflare.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" users can already benefit from build-time image optimization."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url (zone) of your service:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n baseURL: 'https://that-test.site'\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":"ct-578029"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-578029"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-270885"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-270885"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ed412e"},"children":[{"type":"text","value":"'https://that-test.site'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"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":"\n","language":"vue"},"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-a1118e"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your deployment's domain (zone)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/cdn-cgi/image/"}]},{"type":"text","value":" will be automatically appended for generating URLs."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ed412e{color:#98C379}.ct-270885{color:#E06C75}.ct-a1118e{color:#ABB2BF}.ct-578029{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"options","depth":2,"text":"Options","children":[{"id":"baseurl","depth":3,"text":"baseURL"}]}]}},"_type":"markdown","_id":"content:4.providers:cloudflare.md","_source":"content","_file":"4.providers/cloudflare.md","_extension":"md"},{"_path":"/providers/cloudimage","_draft":false,"_partial":false,"_empty":false,"title":"Cloudimage","description":"Nuxt Image has first class integration with Cloudimage","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/home","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the token of your project in cloudimage."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudimage: {\n token: 'demo'\n }\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":"export default {\n image: {\n cloudimage: {\n token: 'demo'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" Current integration uses API "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v7"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override default options:"}]},{"type":"element","tag":"h3","props":{"id":"token"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"token"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]},{"type":"text","value":" (required)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"demo"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your Cloudimage customer token. "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/register_page","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"register"}]},{"type":"text","value":" for a Cloudimage account to get one. The subscription takes less than a minute and is totally free."}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your uploads base URL. This alows to shorten your origin image URLs."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudimage: {\n token: 'demo',\n baseURL: 'sample.li' // optional\n }\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":"export default {\n image: {\n cloudimage: {\n token: 'demo',\n baseURL: 'sample.li' // optional\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"cdnurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cdnURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://{token}.cloudimg.io/v7"}]}]}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-modifiers"},"children":[{"type":"text","value":"Cloudimage modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", also you can pass Cloudimage-specific "},{"type":"element","tag":"a","props":{"href":"https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage-specific transformation"}]},{"type":"text","value":" params to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-fit-values"},"children":[{"type":"text","value":"Cloudimage "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, Cloudimage offers the following for extra resizing params:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" - Crops the image to specified dimensions (width and height) and keeps proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":" - Crops the image automatically keeping the most prominent face."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" - Resizes the image to fit into a specified width and height box, adds padding (image or solid colour) to keep proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cropfit"}]},{"type":"text","value":" - Sets crop or fit resize mode depending on the origin and the desired dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bound"}]},{"type":"text","value":" - Resizes to a given width and height box and keeps proportions. Similar to fit but without adding padding."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"boundmin"}]},{"type":"text","value":" - Resizes an image while bounding the smaller dimension to the desired width or height while keeping proportions."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/home","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the token of your project in cloudimage."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudimage: {\n token: 'demo'\n }\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":"ct-0a026d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a026d"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"cloudimage"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7e43ff"},"children":[{"type":"text","value":"'demo'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" Current integration uses API "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v7"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override default options:"}]},{"type":"element","tag":"h3","props":{"id":"token"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"token"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]},{"type":"text","value":" (required)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"demo"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your Cloudimage customer token. "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/register_page","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"register"}]},{"type":"text","value":" for a Cloudimage account to get one. The subscription takes less than a minute and is totally free."}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your uploads base URL. This alows to shorten your origin image URLs."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudimage: {\n token: 'demo',\n baseURL: 'sample.li' // optional\n }\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":"ct-0a026d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a026d"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"cloudimage"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7e43ff"},"children":[{"type":"text","value":"'demo'"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7e43ff"},"children":[{"type":"text","value":"'sample.li'"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a9a76"},"children":[{"type":"text","value":"// optional"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"cdnurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cdnURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://{token}.cloudimg.io/v7"}]}]}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-modifiers"},"children":[{"type":"text","value":"Cloudimage modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", also you can pass Cloudimage-specific "},{"type":"element","tag":"a","props":{"href":"https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage-specific transformation"}]},{"type":"text","value":" params to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-fit-values"},"children":[{"type":"text","value":"Cloudimage "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, Cloudimage offers the following for extra resizing params:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" - Crops the image to specified dimensions (width and height) and keeps proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":" - Crops the image automatically keeping the most prominent face."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" - Resizes the image to fit into a specified width and height box, adds padding (image or solid colour) to keep proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cropfit"}]},{"type":"text","value":" - Sets crop or fit resize mode depending on the origin and the desired dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bound"}]},{"type":"text","value":" - Resizes to a given width and height box and keeps proportions. Similar to fit but without adding padding."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"boundmin"}]},{"type":"text","value":" - Resizes an image while bounding the smaller dimension to the desired width or height while keeping proportions."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0a9a76{color:#7F848E}.ct-7e43ff{color:#98C379}.ct-1a372d{color:#E06C75}.ct-9e9484{color:#ABB2BF}.ct-0a026d{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"options","depth":2,"text":"Options","children":[{"id":"token","depth":3,"text":"token"},{"id":"baseurl","depth":3,"text":"baseURL"},{"id":"cdnurl","depth":3,"text":"cdnURL"}]},{"id":"cloudimage-modifiers","depth":2,"text":"Cloudimage modifiers"},{"id":"cloudimage-fit-values","depth":2,"text":"Cloudimage fit values"}]}},"_type":"markdown","_id":"content:4.providers:cloudimage.md","_source":"content","_file":"4.providers/cloudimage.md","_extension":"md"},{"_path":"/providers/cloudinary","_draft":false,"_partial":false,"_empty":false,"title":"Cloudinary","description":"Nuxt Image has first class integration with Cloudinary","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your project in cloudinary."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/upload/'\n }\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":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/upload/'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"remote-images"},"children":[{"type":"text","value":"Remote Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle remote image data, you can either use "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"fetch"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"upload"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consult the cloudinary "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/fetch_remote_images#comparing_fetch_to_auto_upload","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" for the difference between the two."}]},{"type":"element","tag":"h3","props":{"id":"fetch"},"children":[{"type":"text","value":"Fetch"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/fetch/'\n }\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":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/fetch/'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: You will need to configure your \"Allowed fetch domains\" to do the above."}]},{"type":"element","tag":"h3","props":{"id":"upload"},"children":[{"type":"text","value":"Upload"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/upload/'\n }\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":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/upload/'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: You will need to configure your \"Auto upload mapping\" to do the above."}]},{"type":"element","tag":"h2","props":{"id":"cloudinary-fit-values"},"children":[{"type":"text","value":"Cloudinary "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, Cloudinary offers the following for extra resizing experience:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minCover"}]},{"type":"text","value":" - Same like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" but only resizing if the original image is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"smaller"}]},{"type":"text","value":" than the given minimum (width and height)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minInside"}]},{"type":"text","value":" - Same as the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":" mode but only if the original image is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"smaller"}]},{"type":"text","value":" than the given minimum (width and height)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"coverLimit"}]},{"type":"text","value":" - Same as the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" mode but only if the original image is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"larger"}]},{"type":"text","value":" than the given limit (width and height)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"thumbnail"}]},{"type":"text","value":"- Generate a thumbnail using face detection."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cropping"}]},{"type":"text","value":" - Used to extract a given width & height out of the original image. The original proportions are retained."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#crop_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary resize mode Documentation"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h2","props":{"id":"cloudinary-modifiers"},"children":[{"type":"text","value":"Cloudinary modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass the following Cloudinary-specific transformation params to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Cloudinary provider automatically enables "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformations#f_auto","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"automatic format selection"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_optimization#automatic_quality_selection_q_auto","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"automatic quality selection"}]},{"type":"text","value":" for best performance."}]}]},{"type":"element","tag":"h3","props":{"id":"rotate"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Accepted values:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Any degree number, or"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto_right"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto_left"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ignore"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vflip"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hflip"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To rotate or flip a given asset by certain degrees, or automatically based on orientation."}]},{"type":"element","tag":"h3","props":{"id":"roundcorner"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"roundCorner"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Round the specified corners of the desired image. If pass only a number or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]},{"type":"text","value":" (all corners will be applied). The syntax for other use cases is as below:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using 2 values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left_bottom_right_radius:top_right_bottom_left_radius"}]},{"type":"text","value":"(Example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"20:40"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using 3 values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left:top_right_bottom_left:bottom_right"}]},{"type":"text","value":" (Example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"20:30:40"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using 4 values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left:top_right:bottom_left:bottom_right"}]},{"type":"text","value":" (Example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"20:0:40:40"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"gravity"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gravity"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Detemine which part of the image to cropped or to place the overlay.\nAccepted values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"subject"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sink"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"faceCenter"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"multipleFaces"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"multipleFacesCenter"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"north"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"northEast"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"northWest"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"west"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"southWest"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"south"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"southEast"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"east"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"center"}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"effect"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effect"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apply a filter or an effect on the desired asset. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#effect_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Effects for images"}]},{"type":"text","value":" for the full list of syntax and available effects."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"color"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"color"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Color to use when text captions, shadow effect and colorize effect are in use."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"flags"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"flags"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One of more flags to alter the default transformation behavior. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#flags_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Flags for Images"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"h3","props":{"id":"dpr"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dpr"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The target device pixel ratio for the asset. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":" means automatically matching the DPR settings in user's device."}]},{"type":"element","tag":"h3","props":{"id":"opacity"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"opacity"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Adjust the opacity of the desired image. Scale: 0 to 100 (%)."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"overlay"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"overlay"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a layer "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"over"}]},{"type":"text","value":" the base image. This can be use with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"y"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gravity"}]},{"type":"text","value":" to customize the position of the overlay."}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#overlay_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Overlay Documentation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"h3","props":{"id":"underlay"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"underlay"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a layer "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"below"}]},{"type":"text","value":" a partial-transparent image. This can be use with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"y"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gravity"}]},{"type":"text","value":" to customize the position of the overlay."}]},{"type":"element","tag":"h3","props":{"id":"transformation"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"transformation"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A pre-defined named transformation to apply to the asset."}]},{"type":"element","tag":"h3","props":{"id":"zoom"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zoom"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use together with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='crop'"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='thumb'"}]},{"type":"text","value":" to decide how much of original image/video surronding the face to keep using face detection."}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"index.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"colorspace"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"colorSpace"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Color space to use for the delivery image url. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#color_space_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Color space Documentation"}]},{"type":"text","value":" for accepted values details."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"customfunc"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"customFunc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Call a custom function on Cloudinary side. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/custom_functions","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Custom Functions"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h3","props":{"id":"density"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"density"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To define the density number when converting a vector file to image format."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary Image Transformation API"}]},{"type":"text","value":" for more details."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your project in cloudinary."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/upload/'\n }\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":"ct-788d2e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"cloudinary"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"'https://res.cloudinary.com//image/upload/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"remote-images"},"children":[{"type":"text","value":"Remote Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle remote image data, you can either use "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"fetch"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"upload"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consult the cloudinary "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/fetch_remote_images#comparing_fetch_to_auto_upload","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" for the difference between the two."}]},{"type":"element","tag":"h3","props":{"id":"fetch"},"children":[{"type":"text","value":"Fetch"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/fetch/'\n }\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":"ct-788d2e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"cloudinary"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"'https://res.cloudinary.com//image/fetch/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"vue"},"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-c0227b"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: You will need to configure your \"Allowed fetch domains\" to do the above."}]},{"type":"element","tag":"h3","props":{"id":"upload"},"children":[{"type":"text","value":"Upload"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n cloudinary: {\n baseURL: 'https://res.cloudinary.com//image/upload/'\n }\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":"ct-788d2e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"cloudinary"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"'https://res.cloudinary.com//image/upload/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"vue"},"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-c0227b"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: You will need to configure your \"Auto upload mapping\" to do the above."}]},{"type":"element","tag":"h2","props":{"id":"cloudinary-fit-values"},"children":[{"type":"text","value":"Cloudinary "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, Cloudinary offers the following for extra resizing experience:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minCover"}]},{"type":"text","value":" - Same like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" but only resizing if the original image is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"smaller"}]},{"type":"text","value":" than the given minimum (width and height)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minInside"}]},{"type":"text","value":" - Same as the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":" mode but only if the original image is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"smaller"}]},{"type":"text","value":" than the given minimum (width and height)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"coverLimit"}]},{"type":"text","value":" - Same as the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" mode but only if the original image is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"larger"}]},{"type":"text","value":" than the given limit (width and height)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"thumbnail"}]},{"type":"text","value":"- Generate a thumbnail using face detection."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cropping"}]},{"type":"text","value":" - Used to extract a given width & height out of the original image. The original proportions are retained."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#crop_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary resize mode Documentation"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h2","props":{"id":"cloudinary-modifiers"},"children":[{"type":"text","value":"Cloudinary modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass the following Cloudinary-specific transformation params to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Cloudinary provider automatically enables "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformations#f_auto","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"automatic format selection"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_optimization#automatic_quality_selection_q_auto","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"automatic quality selection"}]},{"type":"text","value":" for best performance."}]}]},{"type":"element","tag":"h3","props":{"id":"rotate"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Accepted values:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Any degree number, or"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto_right"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto_left"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ignore"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vflip"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hflip"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To rotate or flip a given asset by certain degrees, or automatically based on orientation."}]},{"type":"element","tag":"h3","props":{"id":"roundcorner"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"roundCorner"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Round the specified corners of the desired image. If pass only a number or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]},{"type":"text","value":" (all corners will be applied). The syntax for other use cases is as below:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using 2 values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left_bottom_right_radius:top_right_bottom_left_radius"}]},{"type":"text","value":"(Example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"20:40"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using 3 values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left:top_right_bottom_left:bottom_right"}]},{"type":"text","value":" (Example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"20:30:40"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using 4 values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left:top_right:bottom_left:bottom_right"}]},{"type":"text","value":" (Example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"20:0:40:40"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"code","props":{"code":"\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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"169\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"{ roundCorner: 'max' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"gravity"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gravity"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Detemine which part of the image to cropped or to place the overlay.\nAccepted values: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"subject"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sink"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"faceCenter"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"multipleFaces"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"multipleFacesCenter"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"north"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"northEast"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"northWest"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"west"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"southWest"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"south"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"southEast"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"east"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"center"}]}]},{"type":"element","tag":"code","props":{"code":"\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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"fill\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"{ gravity: 'subject' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"effect"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effect"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apply a filter or an effect on the desired asset. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#effect_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Effects for images"}]},{"type":"text","value":" for the full list of syntax and available effects."}]},{"type":"element","tag":"code","props":{"code":"\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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"fill\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"{ effect: 'grayscale' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"color"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"color"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Color to use when text captions, shadow effect and colorize effect are in use."}]},{"type":"element","tag":"code","props":{"code":"\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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"{ effect: 'colorize:50', color: 'red' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"flags"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"flags"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One of more flags to alter the default transformation behavior. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#flags_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Flags for Images"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"h3","props":{"id":"dpr"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dpr"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The target device pixel ratio for the asset. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":" means automatically matching the DPR settings in user's device."}]},{"type":"element","tag":"h3","props":{"id":"opacity"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"opacity"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Adjust the opacity of the desired image. Scale: 0 to 100 (%)."}]},{"type":"element","tag":"code","props":{"code":"\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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"{ opacity: 50 }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"overlay"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"overlay"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a layer "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"over"}]},{"type":"text","value":" the base image. This can be use with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"y"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gravity"}]},{"type":"text","value":" to customize the position of the overlay."}]},{"type":"element","tag":"code","props":{"code":"\n\n\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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"thumb\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"modifiers\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18cac3"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"gravity"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"'north'"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"overlay"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"'text:default_style:Hello+World'"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#overlay_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Overlay Documentation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"h3","props":{"id":"underlay"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"underlay"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a layer "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"below"}]},{"type":"text","value":" a partial-transparent image. This can be use with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"y"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gravity"}]},{"type":"text","value":" to customize the position of the overlay."}]},{"type":"element","tag":"h3","props":{"id":"transformation"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"transformation"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A pre-defined named transformation to apply to the asset."}]},{"type":"element","tag":"h3","props":{"id":"zoom"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zoom"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use together with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='crop'"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='thumb'"}]},{"type":"text","value":" to decide how much of original image/video surronding the face to keep using face detection."}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"index.vue","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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"thumb\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"modifiers\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18cac3"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-788d2e"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"zoom"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"0.75"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"gravity"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"face\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"colorspace"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"colorSpace"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Color space to use for the delivery image url. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference#color_space_parameter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Color space Documentation"}]},{"type":"text","value":" for accepted values details."}]},{"type":"element","tag":"code","props":{"code":"\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-c0227b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1f8ec7"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbf77d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-522521"},"children":[{"type":"text","value":"\"{ colorSpace: 'srgb' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c0227b"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"customfunc"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"customFunc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Call a custom function on Cloudinary side. See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/custom_functions","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Custom Functions"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h3","props":{"id":"density"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"density"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To define the density number when converting a vector file to image format."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/image_transformation_reference","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary Image Transformation API"}]},{"type":"text","value":" for more details."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-18cac3{color:#61AFEF}.ct-cbf77d{color:#D19A66}.ct-522521{color:#98C379}.ct-1f8ec7{color:#E06C75}.ct-c0227b{color:#ABB2BF}.ct-788d2e{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"remote-images","depth":2,"text":"Remote Images","children":[{"id":"fetch","depth":3,"text":"Fetch"},{"id":"upload","depth":3,"text":"Upload"}]},{"id":"cloudinary-fit-values","depth":2,"text":"Cloudinary fit values"},{"id":"cloudinary-modifiers","depth":2,"text":"Cloudinary modifiers","children":[{"id":"rotate","depth":3,"text":"rotate"},{"id":"roundcorner","depth":3,"text":"roundCorner"},{"id":"gravity","depth":3,"text":"gravity"},{"id":"effect","depth":3,"text":"effect"},{"id":"color","depth":3,"text":"color"},{"id":"flags","depth":3,"text":"flags"},{"id":"dpr","depth":3,"text":"dpr"},{"id":"opacity","depth":3,"text":"opacity"},{"id":"overlay","depth":3,"text":"overlay"},{"id":"underlay","depth":3,"text":"underlay"},{"id":"transformation","depth":3,"text":"transformation"},{"id":"zoom","depth":3,"text":"zoom"},{"id":"colorspace","depth":3,"text":"colorSpace"},{"id":"customfunc","depth":3,"text":"customFunc"},{"id":"density","depth":3,"text":"density"}]}]}},"_type":"markdown","_id":"content:4.providers:cloudinary.md","_source":"content","_file":"4.providers/cloudinary.md","_extension":"md"},{"_path":"/providers/contentful","_draft":false,"_partial":false,"_empty":false,"title":"Contentful","description":"Nuxt Image has first class integration with Contentful","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.contentful.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Contentful"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Contentful."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n contentful: {}\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":"export default {\n image: {\n contentful: {}\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.contentful.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Contentful"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Contentful."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n contentful: {}\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":"ct-c97584"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c97584"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d781ac"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d781ac"},"children":[{"type":"text","value":"contentful"}]},{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":": {}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2465a9"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d781ac{color:#E06C75}.ct-2465a9{color:#ABB2BF}.ct-c97584{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:4.providers:contentful.md","_source":"content","_file":"4.providers/contentful.md","_extension":"md"},{"_path":"/providers/fastly","_draft":false,"_partial":false,"_empty":false,"title":"Fastly","description":"Nuxt Image has first class integration with Fastly","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.fastly.com/en/guides/image-optimization-api","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Fastly"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Fastly."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n fastly: {\n baseURL: 'https://www.fastly.io'\n }\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":"export default {\n image: {\n fastly: {\n baseURL: 'https://www.fastly.io'\n }\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.fastly.com/en/guides/image-optimization-api","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Fastly"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Fastly."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n fastly: {\n baseURL: 'https://www.fastly.io'\n }\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":"ct-bcf0ae"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bcf0ae"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5bbc5d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5bbc5d"},"children":[{"type":"text","value":"fastly"}]},{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5bbc5d"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c967"},"children":[{"type":"text","value":"'https://www.fastly.io'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f5758"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a7c967{color:#98C379}.ct-5bbc5d{color:#E06C75}.ct-5f5758{color:#ABB2BF}.ct-bcf0ae{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:4.providers:fastly.md","_source":"content","_file":"4.providers/fastly.md","_extension":"md"},{"_path":"/providers/glide","_draft":false,"_partial":false,"_empty":false,"title":"Glide","description":"Nuxt Image has first class integration with Glide","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://glide.thephpleague.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Glide"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in glide."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n glide: {\n // baseURL of your laravel application\n baseURL: 'https://glide.herokuapp.com/1.0/'\n }\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":"export default {\n image: {\n glide: {\n // baseURL of your laravel application\n baseURL: 'https://glide.herokuapp.com/1.0/'\n }\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://glide.thephpleague.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Glide"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in glide."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n glide: {\n // baseURL of your laravel application\n baseURL: 'https://glide.herokuapp.com/1.0/'\n }\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":"ct-016c9b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-016c9b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d180d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d180d"},"children":[{"type":"text","value":"glide"}]},{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d8b28"},"children":[{"type":"text","value":"// baseURL of your laravel application"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d180d"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a20892"},"children":[{"type":"text","value":"'https://glide.herokuapp.com/1.0/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02f78"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a20892{color:#98C379}.ct-3d8b28{color:#7F848E}.ct-3d180d{color:#E06C75}.ct-c02f78{color:#ABB2BF}.ct-016c9b{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:4.providers:glide.md","_source":"content","_file":"4.providers/glide.md","_extension":"md"},{"_path":"/providers/gumlet","_draft":false,"_partial":false,"_empty":false,"title":"Gumlet","description":"Nuxt Image has first class integration with Gumlet","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.gumlet.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Gumlet"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Gumlet."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n gumlet: {\n baseURL: 'https://demo.gumlet.io'\n }\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":"export default {\n image: {\n gumlet: {\n baseURL: 'https://demo.gumlet.io'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"gumlet-mode-values"},"children":[{"type":"text","value":"gumlet "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mode"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Gumlet supports all the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture."}]},{"type":"element","tag":"h2","props":{"id":"gumlet-modifiers"},"children":[{"type":"text","value":"gumlet modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass all gumlet-specific render API parameters to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a full list of these modifiers and their uses, check out "},{"type":"element","tag":"a","props":{"href":"https://docs.gumlet.com/reference/image-transform-size#mode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Gumlet's image Rendering API documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"gumlet-best-practices"},"children":[{"type":"text","value":"gumlet best practices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some common best practices when using Gumlet, would be to include our "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format=auto"}]},{"type":"text","value":" parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the "},{"type":"element","tag":"a","props":{"href":"https://demo.gumlet.io/sea.jpeg?format=auto&w=300&h=500&compress=true","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"woman in the hat"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.gumlet.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Gumlet"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Gumlet."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n gumlet: {\n baseURL: 'https://demo.gumlet.io'\n }\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":"ct-ef1d80"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef1d80"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bef167"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bef167"},"children":[{"type":"text","value":"gumlet"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bef167"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-81346b"},"children":[{"type":"text","value":"'https://demo.gumlet.io'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"gumlet-mode-values"},"children":[{"type":"text","value":"gumlet "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mode"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Gumlet supports all the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture."}]},{"type":"element","tag":"h2","props":{"id":"gumlet-modifiers"},"children":[{"type":"text","value":"gumlet modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass all gumlet-specific render API parameters to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a full list of these modifiers and their uses, check out "},{"type":"element","tag":"a","props":{"href":"https://docs.gumlet.com/reference/image-transform-size#mode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Gumlet's image Rendering API documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"gumlet-best-practices"},"children":[{"type":"text","value":"gumlet best practices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some common best practices when using Gumlet, would be to include our "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format=auto"}]},{"type":"text","value":" parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!"}]},{"type":"element","tag":"code","props":{"code":"\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-d89993"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-bef167"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3ebb5a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-81346b"},"children":[{"type":"text","value":"\"gumlet\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3ebb5a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-81346b"},"children":[{"type":"text","value":"\"/sea.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3ebb5a"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-81346b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3ebb5a"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-81346b"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3ebb5a"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-81346b"},"children":[{"type":"text","value":"\"cover\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3ebb5a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-81346b"},"children":[{"type":"text","value":"\"{ format: 'auto', compress: 'true' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d89993"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the "},{"type":"element","tag":"a","props":{"href":"https://demo.gumlet.io/sea.jpeg?format=auto&w=300&h=500&compress=true","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"woman in the hat"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-3ebb5a{color:#D19A66}.ct-81346b{color:#98C379}.ct-bef167{color:#E06C75}.ct-d89993{color:#ABB2BF}.ct-ef1d80{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"gumlet-mode-values","depth":2,"text":"gumlet mode values"},{"id":"gumlet-modifiers","depth":2,"text":"gumlet modifiers"},{"id":"gumlet-best-practices","depth":2,"text":"gumlet best practices"}]}},"_type":"markdown","_id":"content:4.providers:gumlet.md","_source":"content","_file":"4.providers/gumlet.md","_extension":"md"},{"_path":"/providers/imageengine","_draft":false,"_partial":false,"_empty":false,"title":"ImageEngine","description":"Nuxt Image has first class integration with ImageEngine","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"At a minimum, you must configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imageengine"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your ImageEngine Delivery Address:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n imageengine: {\n baseURL: 'https://xxxxx.imgeng.in'\n }\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":"export default {\n image: {\n imageengine: {\n baseURL: 'https://xxxxx.imgeng.in'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-fit-values"},"children":[{"type":"text","value":"ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" map onto "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_cropbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_letterbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_stretch"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_box"}]},{"type":"text","value":", this is the default fit method for the ImageEngine provider."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": This fit method is not supported and functions the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-modifiers"},"children":[{"type":"text","value":"ImageEngine modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also use all "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" by adding them to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" property with the following attribute names:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"passThrough"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pass"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"r"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screenPercent"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pc"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cr"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inline"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"meta"}]},{"type":"text","value":" directive"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note that the standard "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" attribute is converted to the ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cmpr"}]},{"type":"text","value":" compression directive. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" is the opposite of compression, so 80% quality equals 20% compression. Since ImageEngine automatically adapts image quality the visitor's device, browser and network quality, it is recommended that you do not explicitly set the quality. If you want to completely disable all optimizations to an image, you should use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":":modifiers=\"{ passThrough: 'true' }\""}]},{"type":"text","value":", which will serve the unaltered image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 1: Cropping an image to a width and height of 100x80, starting 10 pixels from the top and 20 pixels from the left:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 2: Instruct ImageEngine to keep the image's EXIF metadata (which is normally removed to reduce the image byte size):"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-best-practices"},"children":[{"type":"text","value":"ImageEngine best practices"}]},{"type":"element","tag":"h3","props":{"id":"automatic-format-and-quality-detection"},"children":[{"type":"text","value":"Automatic format and quality detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine automatically detects the best format and quality for your image based on the characteristics of the specific device that requested it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is very effective and it is not recommended that you disable it, but if you must, you can manually specify the format (ex: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='webp'"}]},{"type":"text","value":") and quality ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality='80'"}]},{"type":"text","value":")."}]},{"type":"element","tag":"h3","props":{"id":"imageengine-settings"},"children":[{"type":"text","value":"ImageEngine settings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine allows you to set all of the modifiers/directives in the ImageEngine control panel under advanced settings. This is a good place to set default adjustments since you can modify them without having to make changes to your Nuxt codebase. If a directive is set in both Nuxt and the ImageEngine User-Adjustable Settings, the value in Nuxt takes priority."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"At a minimum, you must configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imageengine"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your ImageEngine Delivery Address:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n imageengine: {\n baseURL: 'https://xxxxx.imgeng.in'\n }\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":"ct-6e7221"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e7221"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"imageengine"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"'https://xxxxx.imgeng.in'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-fit-values"},"children":[{"type":"text","value":"ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" map onto "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_cropbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_letterbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_stretch"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_box"}]},{"type":"text","value":", this is the default fit method for the ImageEngine provider."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": This fit method is not supported and functions the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-modifiers"},"children":[{"type":"text","value":"ImageEngine modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also use all "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" by adding them to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" property with the following attribute names:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"passThrough"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pass"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"r"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screenPercent"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pc"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cr"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inline"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"meta"}]},{"type":"text","value":" directive"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note that the standard "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" attribute is converted to the ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cmpr"}]},{"type":"text","value":" compression directive. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" is the opposite of compression, so 80% quality equals 20% compression. Since ImageEngine automatically adapts image quality the visitor's device, browser and network quality, it is recommended that you do not explicitly set the quality. If you want to completely disable all optimizations to an image, you should use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":":modifiers=\"{ passThrough: 'true' }\""}]},{"type":"text","value":", which will serve the unaltered image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 1: Cropping an image to a width and height of 100x80, starting 10 pixels from the top and 20 pixels from the left:"}]},{"type":"element","tag":"code","props":{"code":"\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-3e64a6"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"imageengine\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"/some-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"80\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"{ cr: '100,80,10,20' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 2: Instruct ImageEngine to keep the image's EXIF metadata (which is normally removed to reduce the image byte size):"}]},{"type":"element","tag":"code","props":{"code":"\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-3e64a6"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"imageengine\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"/some-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"80\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"{ meta: 'true' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-best-practices"},"children":[{"type":"text","value":"ImageEngine best practices"}]},{"type":"element","tag":"h3","props":{"id":"automatic-format-and-quality-detection"},"children":[{"type":"text","value":"Automatic format and quality detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine automatically detects the best format and quality for your image based on the characteristics of the specific device that requested it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is very effective and it is not recommended that you disable it, but if you must, you can manually specify the format (ex: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='webp'"}]},{"type":"text","value":") and quality ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality='80'"}]},{"type":"text","value":")."}]},{"type":"element","tag":"h3","props":{"id":"imageengine-settings"},"children":[{"type":"text","value":"ImageEngine settings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine allows you to set all of the modifiers/directives in the ImageEngine control panel under advanced settings. This is a good place to set default adjustments since you can modify them without having to make changes to your Nuxt codebase. If a directive is set in both Nuxt and the ImageEngine User-Adjustable Settings, the value in Nuxt takes priority."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-03793d{color:#D19A66}.ct-672c6f{color:#98C379}.ct-9f6fdf{color:#E06C75}.ct-3e64a6{color:#ABB2BF}.ct-6e7221{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"imageengine-fit-values","depth":2,"text":"ImageEngine fit values"},{"id":"imageengine-modifiers","depth":2,"text":"ImageEngine modifiers"},{"id":"imageengine-best-practices","depth":2,"text":"ImageEngine best practices","children":[{"id":"automatic-format-and-quality-detection","depth":3,"text":"Automatic format and quality detection"},{"id":"imageengine-settings","depth":3,"text":"ImageEngine settings"}]}]}},"_type":"markdown","_id":"content:4.providers:imageengine.md","_source":"content","_file":"4.providers/imageengine.md","_extension":"md"},{"_path":"/providers/imagekit","_draft":false,"_partial":false,"_empty":false,"title":"ImageKit","description":"Nuxt Image has first class integration with ImageKit","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageKit"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use the ImageKit provider, you need to set your ImageKit account URL-endpoint as the base url like below."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n imagekit: {\n baseURL: 'https://ik.imagekit.io/your_imagekit_id'\n }\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":"export default {\n image: {\n imagekit: {\n baseURL: 'https://ik.imagekit.io/your_imagekit_id'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can get "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/integration/url-endpoints#default-url-endpoint","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"URL-endpoint"}]},{"type":"text","value":" from your ImageKit dashboard - "},{"type":"element","tag":"a","props":{"href":"https://imagekit.io/dashboard#url-endpoints","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://imagekit.io/dashboard#url-endpoints"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"imagekit-fit-parameters"},"children":[{"type":"text","value":"ImageKit "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" Parameters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"text","value":" properties of Nuxt Image and Nuxt Picture, ImageKit offers more cropping and resizing options to the users:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"extract"}]},{"type":"text","value":" - The output image has its height, width as requested, and the aspect ratio is preserved. Unlike the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" parameter, we extract out a region of the requested dimension from the original image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pad_extract"}]},{"type":"text","value":" - This parameter is similar to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"extract"}]},{"type":"text","value":". This comes in handy in scenarios where we want to extract an image of a larger dimension from a smaller image. So, the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pad_extract"}]},{"type":"text","value":" mode adds solid colored padding around the image to match the exact size requested."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read ImageKit "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#crop-crop-modes-and-focus","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"crop and crop mode documentation"}]},{"type":"text","value":" for more details and examples of how it works."}]},{"type":"element","tag":"h2","props":{"id":"imagekit-modifiers"},"children":[{"type":"text","value":"ImageKit Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On top of the standard "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"Nuxt Image modifiers"}]},{"type":"text","value":", a user can also leverage ImageKit-specific transformation parameters provided in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifier"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"h3","props":{"id":"focus"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This parameter can be used along with resizing and cropping to focus on the desired part of the image. You can use focus parameter values like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"left"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"right"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"center"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"left"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"right"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_right"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom_left"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom_right"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom coordinates can also be used to focus using parameter value "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"custom"}]},{"type":"text","value":". Learn more from "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#example-focus-using-custom-coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Moreover, ImageKit also provides smart cropping that can automatically detect the most important part of the image using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":". And, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":" can be used to find a face (or multiple faces) in an image and focus on that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out ImageKit's documentation on "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#focus-fo","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" to learn more."}]},{"type":"element","tag":"h3","props":{"id":"blur"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blur"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This can be used to blur an image. Use modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blur"}]},{"type":"text","value":" to specify the Gaussian Blur radius that is to be applied to the image. Possible values include integers between "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"100"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"effectgray"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectGray"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Turn your image to a grayscale version using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectGray"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"named"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"named"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/named-transformations","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"named transformations"}]},{"type":"text","value":" as an alias for an entire transformation string."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, we can create a named transformation - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"media_library_thumbnail"}]},{"type":"text","value":" for a transformation string - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tr:w-100,h-100,c-at_max,fo-auto"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"border"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add a border to your images using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border"}]},{"type":"text","value":" modifier. You can also set its width and color."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"rotate"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":" modifier to rotate your image. Possible values are - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"90"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"180"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"270"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"360"}]},{"type":"text","value":", and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"radius"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"radius"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Give rounded corners to your image using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"radius"}]},{"type":"text","value":". Possible values are - positive integers and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"bg"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify background color and its opacity for your image using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more about ImageKit crop, resize, and other common transformations "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"overlay-transformation-modifiers"},"children":[{"type":"text","value":"Overlay Transformation Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using ImageKit's Nuxt Image integration, you can overlay images or text over other images for watermarking or creating a dynamic banner using custom text!"}]},{"type":"element","tag":"h3","props":{"id":"overlayimage"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"overlayImage"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Overlay an image on top of another image (base image) using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"overlayImage"}]},{"type":"text","value":" modifier. You can use this to create dynamic banners, watermarking, etc."}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"overlay-text"},"children":[{"type":"text","value":"Overlay Text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can overlay text on an image and apply various transformations to it as per your needs."}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more about ImageKit's overlay transformation parameters "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/overlay","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"image-enhancement-modifiers"},"children":[{"type":"text","value":"Image Enhancement Modifiers"}]},{"type":"element","tag":"h3","props":{"id":"effectcontrast"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectContrast"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Enhance contrast of an image using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectContrast"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"effectsharpen"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectSharpen"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sharpen the input image using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectSharpen"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"list-of-supported-transforms"},"children":[{"type":"text","value":"List of supported transforms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageKit's Nuxt Image integration provides an easy-to-remember name for each transformation parameter. It makes your code more readable. If you use a property that does not match any of the following supported options, it will be added in the URL as it is."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Supported Parameter Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Translates to Parameter"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"bg"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"aspectRatio"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ar"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"x"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"y"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"xc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"xc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"yc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"yc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oix"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oix"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiy"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiy"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oixc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oixc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiyc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiyc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"crop"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"c"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"cropMode"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"cm"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"focus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"fo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"radius"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"r"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"border"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"b"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rotate"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rt"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"bl"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"named"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"n"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayX"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ox"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayY"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oy"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayFocus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ofo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayHeight"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oh"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayWidth"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ow"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImage"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oi"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageTrim"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oit"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageAspectRatio"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiar"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageBackground"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oibg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageBorder"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oib"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageDPR"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oidpr"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageQuality"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiq"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageCropping"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageCropMode"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oicm"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayText"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ot"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextFontSize"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ots"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextFontFamily"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otf"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextColor"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextTransparency"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oa"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextTypography"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ott"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayBackground"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"obg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextEncoded"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ote"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextWidth"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otw"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextBackground"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otbg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextPadding"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otp"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextInnerAlignment"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otia"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayRadius"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"or"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"progressive"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pr"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"lossless"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"lo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"trim"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"t"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"md"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"colorProfile"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"cp"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"defaultImage"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"di"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"dpr"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"dpr"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectSharpen"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-sharpen"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectUSM"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-usm"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectContrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-contrast"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectGray"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-grayscale"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"original"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"orig"}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageKit's Image transformations"}]},{"type":"text","value":" from the official documentation."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageKit"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use the ImageKit provider, you need to set your ImageKit account URL-endpoint as the base url like below."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n imagekit: {\n baseURL: 'https://ik.imagekit.io/your_imagekit_id'\n }\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":"ct-a8e90e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e90e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"imagekit"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'https://ik.imagekit.io/your_imagekit_id'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can get "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/integration/url-endpoints#default-url-endpoint","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"URL-endpoint"}]},{"type":"text","value":" from your ImageKit dashboard - "},{"type":"element","tag":"a","props":{"href":"https://imagekit.io/dashboard#url-endpoints","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://imagekit.io/dashboard#url-endpoints"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"imagekit-fit-parameters"},"children":[{"type":"text","value":"ImageKit "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" Parameters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"text","value":" properties of Nuxt Image and Nuxt Picture, ImageKit offers more cropping and resizing options to the users:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"extract"}]},{"type":"text","value":" - The output image has its height, width as requested, and the aspect ratio is preserved. Unlike the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" parameter, we extract out a region of the requested dimension from the original image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pad_extract"}]},{"type":"text","value":" - This parameter is similar to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"extract"}]},{"type":"text","value":". This comes in handy in scenarios where we want to extract an image of a larger dimension from a smaller image. So, the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pad_extract"}]},{"type":"text","value":" mode adds solid colored padding around the image to match the exact size requested."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read ImageKit "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#crop-crop-modes-and-focus","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"crop and crop mode documentation"}]},{"type":"text","value":" for more details and examples of how it works."}]},{"type":"element","tag":"h2","props":{"id":"imagekit-modifiers"},"children":[{"type":"text","value":"ImageKit Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On top of the standard "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"Nuxt Image modifiers"}]},{"type":"text","value":", a user can also leverage ImageKit-specific transformation parameters provided in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifier"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"h3","props":{"id":"focus"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This parameter can be used along with resizing and cropping to focus on the desired part of the image. You can use focus parameter values like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"left"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"right"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"center"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"left"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"right"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_left"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top_right"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom_left"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom_right"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom coordinates can also be used to focus using parameter value "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"custom"}]},{"type":"text","value":". Learn more from "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#example-focus-using-custom-coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Moreover, ImageKit also provides smart cropping that can automatically detect the most important part of the image using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":". And, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":" can be used to find a face (or multiple faces) in an image and focus on that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out ImageKit's documentation on "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#focus-fo","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" to learn more."}]},{"type":"element","tag":"h3","props":{"id":"blur"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blur"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This can be used to blur an image. Use modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blur"}]},{"type":"text","value":" to specify the Gaussian Blur radius that is to be applied to the image. Possible values include integers between "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"100"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{blur: 10}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"effectgray"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectGray"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Turn your image to a grayscale version using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectGray"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{effectGray: true}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"named"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"named"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/named-transformations","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"named transformations"}]},{"type":"text","value":" as an alias for an entire transformation string."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, we can create a named transformation - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"media_library_thumbnail"}]},{"type":"text","value":" for a transformation string - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tr:w-100,h-100,c-at_max,fo-auto"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"border"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add a border to your images using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border"}]},{"type":"text","value":" modifier. You can also set its width and color."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{border: '20_FF0000'}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"rotate"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":" modifier to rotate your image. Possible values are - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"90"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"180"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"270"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"360"}]},{"type":"text","value":", and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{rotate: 90}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"radius"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"radius"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Give rounded corners to your image using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"radius"}]},{"type":"text","value":". Possible values are - positive integers and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{radius: 20}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"bg"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify background color and its opacity for your image using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"1200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"1200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"pad_extract\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{bg: '272B38'}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more about ImageKit crop, resize, and other common transformations "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"overlay-transformation-modifiers"},"children":[{"type":"text","value":"Overlay Transformation Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using ImageKit's Nuxt Image integration, you can overlay images or text over other images for watermarking or creating a dynamic banner using custom text!"}]},{"type":"element","tag":"h3","props":{"id":"overlayimage"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"overlayImage"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Overlay an image on top of another image (base image) using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"overlayImage"}]},{"type":"text","value":" modifier. You can use this to create dynamic banners, watermarking, etc."}]},{"type":"element","tag":"code","props":{"code":"\n\n\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"modifiers\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e90e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e90e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-058657"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e90e"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayImage"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'default-image.jpg'"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlaywidth"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"300"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"200"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayFocus"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'top_left'"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayImageBorder"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'5_FFFFFF'"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"overlay-text"},"children":[{"type":"text","value":"Overlay Text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can overlay text on an image and apply various transformations to it as per your needs."}]},{"type":"element","tag":"code","props":{"code":"\n\n\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"modifiers\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e90e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e90e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-058657"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e90e"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayText"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'overlay made easy'"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayRadius"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"30"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayTextBackground"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'FFFFFF80'"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayTextFontSize"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'45'"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayTextColor"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'000000'"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"overlayTextPadding"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"'40'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more about ImageKit's overlay transformation parameters "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations/overlay","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"image-enhancement-modifiers"},"children":[{"type":"text","value":"Image Enhancement Modifiers"}]},{"type":"element","tag":"h3","props":{"id":"effectcontrast"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectContrast"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Enhance contrast of an image using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectContrast"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{effectContrast: true}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"effectsharpen"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectSharpen"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sharpen the input image using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"effectSharpen"}]},{"type":"text","value":" modifier."}]},{"type":"element","tag":"code","props":{"code":"\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-7fa3be"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d4c4d2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"imagekit\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"/default-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-abe43a"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f986b"},"children":[{"type":"text","value":"\"{effectSharpen: 10}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fa3be"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"list-of-supported-transforms"},"children":[{"type":"text","value":"List of supported transforms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageKit's Nuxt Image integration provides an easy-to-remember name for each transformation parameter. It makes your code more readable. If you use a property that does not match any of the following supported options, it will be added in the URL as it is."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Supported Parameter Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Translates to Parameter"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"bg"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"aspectRatio"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ar"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"x"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"y"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"xc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"xc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"yc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"yc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oix"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oix"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiy"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiy"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oixc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oixc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiyc"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiyc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"crop"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"c"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"cropMode"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"cm"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"focus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"fo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"radius"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"r"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"border"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"b"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rotate"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rt"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"bl"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"named"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"n"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayX"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ox"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayY"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oy"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayFocus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ofo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayHeight"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oh"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayWidth"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ow"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImage"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oi"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageTrim"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oit"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageAspectRatio"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiar"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageBackground"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oibg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageBorder"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oib"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageDPR"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oidpr"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageQuality"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oiq"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageCropping"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayImageCropMode"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oicm"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayText"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ot"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextFontSize"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ots"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextFontFamily"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otf"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextColor"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otc"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextTransparency"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"oa"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextTypography"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ott"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayBackground"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"obg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextEncoded"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ote"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextWidth"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otw"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextBackground"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otbg"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextPadding"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otp"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayTextInnerAlignment"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"otia"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overlayRadius"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"or"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"progressive"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pr"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"lossless"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"lo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"trim"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"t"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"md"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"colorProfile"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"cp"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"defaultImage"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"di"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"dpr"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"dpr"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectSharpen"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-sharpen"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectUSM"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-usm"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectContrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-contrast"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"effectGray"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"e-grayscale"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"original"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"orig"}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about "},{"type":"element","tag":"a","props":{"href":"https://docs.imagekit.io/features/image-transformations","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageKit's Image transformations"}]},{"type":"text","value":" from the official documentation."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-058657{color:#61AFEF}.ct-abe43a{color:#D19A66}.ct-0f986b{color:#98C379}.ct-d4c4d2{color:#E06C75}.ct-7fa3be{color:#ABB2BF}.ct-a8e90e{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"imagekit-fit-parameters","depth":2,"text":"ImageKit fit Parameters"},{"id":"imagekit-modifiers","depth":2,"text":"ImageKit Modifiers","children":[{"id":"focus","depth":3,"text":"focus"},{"id":"blur","depth":3,"text":"blur"},{"id":"effectgray","depth":3,"text":"effectGray"},{"id":"named","depth":3,"text":"named"},{"id":"border","depth":3,"text":"border"},{"id":"rotate","depth":3,"text":"rotate"},{"id":"radius","depth":3,"text":"radius"},{"id":"bg","depth":3,"text":"bg"}]},{"id":"overlay-transformation-modifiers","depth":2,"text":"Overlay Transformation Modifiers","children":[{"id":"overlayimage","depth":3,"text":"overlayImage"},{"id":"overlay-text","depth":3,"text":"Overlay Text"}]},{"id":"image-enhancement-modifiers","depth":2,"text":"Image Enhancement Modifiers","children":[{"id":"effectcontrast","depth":3,"text":"effectContrast"},{"id":"effectsharpen","depth":3,"text":"effectSharpen"}]},{"id":"list-of-supported-transforms","depth":2,"text":"List of supported transforms"}]}},"_type":"markdown","_id":"content:4.providers:imagekit.md","_source":"content","_file":"4.providers/imagekit.md","_extension":"md"},{"_path":"/providers/imgix","_draft":false,"_partial":false,"_empty":false,"title":"Imgix","description":"Nuxt Image has first class integration with Imgix","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Imgix"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Imgix."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n imgix: {\n baseURL: 'https://assets.imgix.net'\n }\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":"export default {\n image: {\n imgix: {\n baseURL: 'https://assets.imgix.net'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-fit-values"},"children":[{"type":"text","value":"imgix "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, imgix offers the following for extra resizing experience:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clamp"}]},{"type":"text","value":" - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image. The resulting image will match the constraining dimensions. The pixel extension is called an affine clamp, hence the value name, \"clamp\"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clip"}]},{"type":"text","value":" - The default fit setting for imgix images. Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"facearea"}]},{"type":"text","value":" - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/faceindex","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"faceindex"}]},{"type":"text","value":" to identify a specific face, as well as "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/facepad","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"facepad"}]},{"type":"text","value":" to include additional padded area around the face to zoom out from the immediate area around the faces."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fillMax"}]},{"type":"text","value":" - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions."}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-modifiers"},"children":[{"type":"text","value":"imgix modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass all imgix-specific render API parameters to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a full list of these modifiers and their uses, check out "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"imgix's image Rendering API documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"imgix-best-practices"},"children":[{"type":"text","value":"imgix best practices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some common best practices when using imgix, would be to include our auto parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the "},{"type":"element","tag":"a","props":{"href":"https://assets.imgix.net/blog/woman-hat.jpg?w=300&h=500&fit=crop&crop=faces","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"woman in the hat"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-documentation"},"children":[{"type":"text","value":"Additional Documentation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can find additional documentation and a step-by-step tutorial in an imgix blog article titled "},{"type":"element","tag":"a","props":{"href":"https://blog.imgix.com/2021/09/14/nuxt-image-component","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Using the New Nuxt Component with imgix"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Imgix"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Imgix."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n imgix: {\n baseURL: 'https://assets.imgix.net'\n }\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":"ct-b2daae"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2daae"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"imgix"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"'https://assets.imgix.net'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-fit-values"},"children":[{"type":"text","value":"imgix "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, imgix offers the following for extra resizing experience:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clamp"}]},{"type":"text","value":" - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image. The resulting image will match the constraining dimensions. The pixel extension is called an affine clamp, hence the value name, \"clamp\"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clip"}]},{"type":"text","value":" - The default fit setting for imgix images. Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"facearea"}]},{"type":"text","value":" - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/faceindex","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"faceindex"}]},{"type":"text","value":" to identify a specific face, as well as "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/facepad","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"facepad"}]},{"type":"text","value":" to include additional padded area around the face to zoom out from the immediate area around the faces."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fillMax"}]},{"type":"text","value":" - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions."}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-modifiers"},"children":[{"type":"text","value":"imgix modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass all imgix-specific render API parameters to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a full list of these modifiers and their uses, check out "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"imgix's image Rendering API documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"imgix-best-practices"},"children":[{"type":"text","value":"imgix best practices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some common best practices when using imgix, would be to include our auto parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!"}]},{"type":"element","tag":"code","props":{"code":"\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-0eb589"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"imgix\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"/blog/woman-hat.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"cover\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"{ auto: 'format,compress', crop: 'faces' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the "},{"type":"element","tag":"a","props":{"href":"https://assets.imgix.net/blog/woman-hat.jpg?w=300&h=500&fit=crop&crop=faces","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"woman in the hat"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-documentation"},"children":[{"type":"text","value":"Additional Documentation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can find additional documentation and a step-by-step tutorial in an imgix blog article titled "},{"type":"element","tag":"a","props":{"href":"https://blog.imgix.com/2021/09/14/nuxt-image-component","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Using the New Nuxt Component with imgix"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ed49eb{color:#D19A66}.ct-ba1968{color:#98C379}.ct-d24328{color:#E06C75}.ct-0eb589{color:#ABB2BF}.ct-b2daae{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"imgix-fit-values","depth":2,"text":"imgix fit values"},{"id":"imgix-modifiers","depth":2,"text":"imgix modifiers"},{"id":"imgix-best-practices","depth":2,"text":"imgix best practices"},{"id":"additional-documentation","depth":2,"text":"Additional Documentation"}]}},"_type":"markdown","_id":"content:4.providers:imgix.md","_source":"content","_file":"4.providers/imgix.md","_extension":"md"},{"_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":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\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":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\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":"\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":"\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"},{"_path":"/providers/layer0","_draft":false,"_partial":false,"_empty":false,"title":"Layer0","description":"Optimize images with Layer0's optimization service","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Layer0 provides a simple HTTP service for optimizing images."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image optimizer will only return an optimized image for mobile browsers. Desktop browsers are served the original image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This integration works out of the box without need to configure! See the "},{"type":"element","tag":"a","props":{"href":"https://docs.layer0.co/guides/image_optimization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Documentation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Layer0 supports the following modifiers: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Defalt: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://opt.moovweb.net"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Layer0 provides a simple HTTP service for optimizing images."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image optimizer will only return an optimized image for mobile browsers. Desktop browsers are served the original image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This integration works out of the box without need to configure! See the "},{"type":"element","tag":"a","props":{"href":"https://docs.layer0.co/guides/image_optimization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Documentation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"vue"},"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-ae3d80"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Layer0 supports the following modifiers: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Defalt: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://opt.moovweb.net"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ae3d80{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"modifiers","depth":2,"text":"Modifiers"},{"id":"options","depth":2,"text":"Options","children":[{"id":"baseurl","depth":3,"text":"baseURL"}]}]}},"_type":"markdown","_id":"content:4.providers:layer0.md","_source":"content","_file":"4.providers/layer0.md","_extension":"md"},{"_path":"/providers/netlify","_draft":false,"_partial":false,"_empty":false,"title":"Netlify","description":"Optimize images with Netlify's dynamic image transformation service","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Netlify offers dynamic image transformation for all JPEG, PNG, and GIF files you have set to be tracked with "},{"type":"element","tag":"a","props":{"href":"https://docs.netlify.com/large-media/overview/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Netlify Large Media"}]},{"type":"text","value":"."}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Before setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider: 'netlify'"}]},{"type":"text","value":", make sure you have followed the steps to enable "},{"type":"element","tag":"a","props":{"href":"https://docs.netlify.com/large-media/overview/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Netlify Large Media"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":", the Netlify provider supports the following modifiers:"}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Valid options"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":" (equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nf_resize=fit"}]},{"type":"text","value":") and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":" (equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nf_resize=smartcrop"}]},{"type":"text","value":")"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Netlify offers dynamic image transformation for all JPEG, PNG, and GIF files you have set to be tracked with "},{"type":"element","tag":"a","props":{"href":"https://docs.netlify.com/large-media/overview/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Netlify Large Media"}]},{"type":"text","value":"."}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Before setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider: 'netlify'"}]},{"type":"text","value":", make sure you have followed the steps to enable "},{"type":"element","tag":"a","props":{"href":"https://docs.netlify.com/large-media/overview/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Netlify Large Media"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":", the Netlify provider supports the following modifiers:"}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Valid options"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":" (equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nf_resize=fit"}]},{"type":"text","value":") and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":" (equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nf_resize=smartcrop"}]},{"type":"text","value":")"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"modifiers","depth":2,"text":"Modifiers","children":[{"id":"fit","depth":3,"text":"fit"}]}]}},"_type":"markdown","_id":"content:4.providers:netlify.md","_source":"content","_file":"4.providers/netlify.md","_extension":"md"},{"_path":"/providers/prismic","_draft":false,"_partial":false,"_empty":false,"title":"Prismic","description":"Nuxt Image has first class integration with Prismic","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://prismic.io/docs","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Prismic"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required for Prismic support. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider: 'prismic'"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n prismic: {}\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":"export default {\n image: {\n prismic: {}\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also pass it directly to your component when you need it, for example:"}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"*.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prismic allows content writer to manipulate images through its UI (cropping, rezising, etc.). To preserve that behavior this provider does not strip query parameters coming from Prismic. Instead it only overrides them when needed, keeping developers in control."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://prismic.io/docs","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Prismic"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required for Prismic support. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider: 'prismic'"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n prismic: {}\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":"ct-8f4aa7"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8f4aa7"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03fa9a"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03fa9a"},"children":[{"type":"text","value":"prismic"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":": {}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also pass it directly to your component when you need it, for example:"}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"*.vue","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-f0112b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-03fa9a"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72e345"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80ac31"},"children":[{"type":"text","value":"\"prismic\""}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72e345"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80ac31"},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prismic allows content writer to manipulate images through its UI (cropping, rezising, etc.). To preserve that behavior this provider does not strip query parameters coming from Prismic. Instead it only overrides them when needed, keeping developers in control."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-80ac31{color:#98C379}.ct-72e345{color:#D19A66}.ct-03fa9a{color:#E06C75}.ct-f0112b{color:#ABB2BF}.ct-8f4aa7{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:4.providers:prismic.md","_source":"content","_file":"4.providers/prismic.md","_extension":"md"},{"_path":"/providers/sanity","_draft":false,"_partial":false,"_empty":false,"title":"Sanity","description":"Nuxt Image has first class integration with Sanity","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Sanity"}]},{"type":"text","value":" and Nuxt Image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"projectId"}]},{"type":"text","value":" of your project in Sanity."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n sanity: {\n projectId: 'yourprojectid',\n // Defaults to 'production'\n // dataset: 'development'\n }\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":"export default {\n image: {\n sanity: {\n projectId: 'yourprojectid',\n // Defaults to 'production'\n // dataset: 'development'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Sanity provider supports a number of additional modifiers. For a full list, check out "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"the Sanity documentation"}]},{"type":"text","value":". All of the modifiers mentioned in the Sanity docs are supported, with the following notes."}]},{"type":"element","tag":"h3","props":{"id":"extra-convenience-modifiers"},"children":[{"type":"text","value":"Extra convenience modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following more readable modifiers are also supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"download"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dl"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"orientation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"or"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"saturation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sat"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the values specified in the Sanity docs, which are respected, the following options from the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"default fit behavior"}]},{"type":"text","value":" are supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":", and defaults to filling with a white background. (You can specify your own background color with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" modifier.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"scale"}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For compatibility with other providers, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: fill"}]},{"type":"text","value":" is equivalent to the Sanity parameter "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=scale"}]},{"type":"text","value":". If you need the Sanity "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=fill"}]},{"type":"text","value":" behavior, use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: contain"}]},{"type":"text","value":" instead."}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can specify any of the formats suppored by Sanity. If this is omitted, the Sanity provider will default to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto=format"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop-and-hotspot"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hotspot"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can pass your Sanity crop and hotspot image data as modifiers and Nuxt Image will correctly generate the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rect"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-x"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-y"}]},{"type":"text","value":" parameters for you."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Sanity"}]},{"type":"text","value":" and Nuxt Image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"projectId"}]},{"type":"text","value":" of your project in Sanity."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n sanity: {\n projectId: 'yourprojectid',\n // Defaults to 'production'\n // dataset: 'development'\n }\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":"ct-6119c3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6119c3"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-595ded"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-595ded"},"children":[{"type":"text","value":"sanity"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-595ded"},"children":[{"type":"text","value":"projectId"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5f273b"},"children":[{"type":"text","value":"'yourprojectid'"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d200c3"},"children":[{"type":"text","value":"// Defaults to 'production'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d200c3"},"children":[{"type":"text","value":"// dataset: 'development'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Sanity provider supports a number of additional modifiers. For a full list, check out "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"the Sanity documentation"}]},{"type":"text","value":". All of the modifiers mentioned in the Sanity docs are supported, with the following notes."}]},{"type":"element","tag":"h3","props":{"id":"extra-convenience-modifiers"},"children":[{"type":"text","value":"Extra convenience modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following more readable modifiers are also supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"download"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dl"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"orientation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"or"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"saturation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sat"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the values specified in the Sanity docs, which are respected, the following options from the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"default fit behavior"}]},{"type":"text","value":" are supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":", and defaults to filling with a white background. (You can specify your own background color with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" modifier.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"scale"}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For compatibility with other providers, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: fill"}]},{"type":"text","value":" is equivalent to the Sanity parameter "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=scale"}]},{"type":"text","value":". If you need the Sanity "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=fill"}]},{"type":"text","value":" behavior, use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: contain"}]},{"type":"text","value":" instead."}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can specify any of the formats suppored by Sanity. If this is omitted, the Sanity provider will default to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto=format"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop-and-hotspot"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hotspot"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can pass your Sanity crop and hotspot image data as modifiers and Nuxt Image will correctly generate the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rect"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-x"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-y"}]},{"type":"text","value":" parameters for you."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d200c3{color:#7F848E}.ct-5f273b{color:#98C379}.ct-595ded{color:#E06C75}.ct-94bf12{color:#ABB2BF}.ct-6119c3{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"modifiers","depth":2,"text":"Modifiers","children":[{"id":"extra-convenience-modifiers","depth":3,"text":"Extra convenience modifiers"},{"id":"fit","depth":3,"text":"fit"},{"id":"format","depth":3,"text":"format"},{"id":"crop-and-hotspot","depth":3,"text":"crop and hotspot"}]}]}},"_type":"markdown","_id":"content:4.providers:sanity.md","_source":"content","_file":"4.providers/sanity.md","_extension":"md"},{"_path":"/providers/storyblok","_draft":false,"_partial":false,"_empty":false,"title":"Storyblok","description":"Nuxt Image internally use Storyblok as static provider","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"text","value":" and the image module. To use this provider you just need to specify the base url of your service in Storyblok."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n storyblok: {\n baseURL: 'https://a.storyblok.com'\n }\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":"export default {\n image: {\n storyblok: {\n baseURL: 'https://a.storyblok.com'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok-modifiers"},"children":[{"type":"text","value":"Storyblok modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I am following all modifiers present on "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok image service"}]}]},{"type":"element","tag":"h3","props":{"id":"resizing"},"children":[{"type":"text","value":"Resizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#resizing","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"the logic is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you not defining the width or height it's taking the original image size."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you defined only the width or height it will resize proportionaly based ont he one defined"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
Original
\n\n\n
Resized static
\n\n\n
Proportional to Width
\n\n\n
Proportional to Height
\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"
Original
\n\n\n
Resized static
\n\n\n
Proportional to Width
\n\n\n
Proportional to Height
\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit-in-with-background-or-not"},"children":[{"type":"text","value":"Fit in with background or not"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#fit-in","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to use it just add a props "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit=\"in\""}]},{"type":"text","value":". Take care that storyblok only support "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit-in"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also use the fill filters to fill your fit-in with a specific background. If you not defining value it will be transparent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
Fit in with background CCCCCC
\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"
Fit in with background CCCCCC
\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"text","value":"Format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#changing-the-format","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can modify your image format. Supported format are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"

Format

\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"

Format

\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"Quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#quality-optimization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can update your image quality by defining the quality filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
\n
Resized and 10% Quality
\n\n
\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"
\n
Resized and 10% Quality
\n\n
\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"facial-detection"},"children":[{"type":"text","value":"Facial detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#facial-detection-and-smart-cropping","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To have a smart crop just define a smart property inside modifier."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"

Facial detection

\n\n
Resized without Smart Crop
\n\n\n
Resized with Smart Crop
\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"

Facial detection

\n\n
Resized without Smart Crop
\n\n\n
Resized with Smart Crop
\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"custom-focal-point"},"children":[{"type":"text","value":"Custom focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#custom-focal-point","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Storyblok offer you the focalize on a specific part of your image. Just use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focal"}]},{"type":"text","value":" filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
Focus on the bottom of the image
\n\n\n
Focus on the top of the image
\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"
Focus on the bottom of the image
\n\n\n
Focus on the top of the image
\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"text","value":" and the image module. To use this provider you just need to specify the base url of your service in Storyblok."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n storyblok: {\n baseURL: 'https://a.storyblok.com'\n }\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":"ct-728e4a"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-728e4a"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"storyblok"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"'https://a.storyblok.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok-modifiers"},"children":[{"type":"text","value":"Storyblok modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I am following all modifiers present on "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok image service"}]}]},{"type":"element","tag":"h3","props":{"id":"resizing"},"children":[{"type":"text","value":"Resizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#resizing","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"the logic is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you not defining the width or height it's taking the original image size."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you defined only the width or height it will resize proportionaly based ont he one defined"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
Original
\n\n\n
Resized static
\n\n\n
Proportional to Width
\n\n\n
Proportional to Height
\n\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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Original"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized static"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Proportional to Width"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Proportional to Height"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit-in-with-background-or-not"},"children":[{"type":"text","value":"Fit in with background or not"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#fit-in","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to use it just add a props "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit=\"in\""}]},{"type":"text","value":". Take care that storyblok only support "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit-in"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also use the fill filters to fill your fit-in with a specific background. If you not defining value it will be transparent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
Fit in with background CCCCCC
\n\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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Fit in with background CCCCCC"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"in\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ filters: { fill: 'CCCCCC' } }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"text","value":"Format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#changing-the-format","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can modify your image format. Supported format are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"

Format

\n\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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Format"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"webp\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"Quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#quality-optimization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can update your image quality by defining the quality filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
\n
Resized and 10% Quality
\n\n
\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-587f14"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"flex\""}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized and 10% Quality"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"10\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"facial-detection"},"children":[{"type":"text","value":"Facial detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#facial-detection-and-smart-cropping","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To have a smart crop just define a smart property inside modifier."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"

Facial detection

\n\n
Resized without Smart Crop
\n\n\n
Resized with Smart Crop
\n\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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Facial detection"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized without Smart Crop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized with Smart Crop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ smart: true }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"custom-focal-point"},"children":[{"type":"text","value":"Custom focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#custom-focal-point","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Storyblok offer you the focalize on a specific part of your image. Just use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focal"}]},{"type":"text","value":" filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"
Focus on the bottom of the image
\n\n\n
Focus on the top of the image
\n\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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Focus on the bottom of the image"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ filters: { focal: '450x500:550x600' } }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"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-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Focus on the top of the image"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ filters: { focal: '450x0:550x100' } }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-23c66b{color:#D19A66}.ct-6046b8{color:#FFFFFF}.ct-ce612a{color:#98C379}.ct-9da7a3{color:#E06C75}.ct-587f14{color:#ABB2BF}.ct-728e4a{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"storyblok-modifiers","depth":2,"text":"Storyblok modifiers","children":[{"id":"resizing","depth":3,"text":"Resizing"},{"id":"fit-in-with-background-or-not","depth":3,"text":"Fit in with background or not"},{"id":"format","depth":3,"text":"Format"},{"id":"quality","depth":3,"text":"Quality"},{"id":"facial-detection","depth":3,"text":"Facial detection"},{"id":"custom-focal-point","depth":3,"text":"Custom focal point"}]}]}},"_type":"markdown","_id":"content:4.providers:storyblok.md","_source":"content","_file":"4.providers/storyblok.md","_extension":"md"},{"_path":"/providers/strapi","_draft":false,"_partial":false,"_empty":false,"title":"Strapi","description":"Nuxt Image with Strapi integration","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://strapi.io","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Strapi"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"strapi"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n strapi: {}\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":"export default {\n image: {\n strapi: {}\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Override default options:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n strapi: {\n baseURL: 'http://localhost:1337/uploads/'\n }\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":"export default {\n image: {\n strapi: {\n baseURL: 'http://localhost:1337/uploads/'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"breakpoint"}]},{"type":"text","value":" modifier is used to specify the size of the image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, when the image is uploaded and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Enable responsive friendly upload"}]},{"type":"text","value":" Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Largest Dimension"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"small"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"medium"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"750px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"large"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1000px"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override the default breakpoints. See the "},{"type":"element","tag":"a","props":{"href":"https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Upload configuration"}]},{"type":"text","value":" in the Strapi documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don't set breakpoint modifier, the original image size will be used:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Define breakpoint modifier:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one breakpoint can be modified per image."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://strapi.io","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Strapi"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"strapi"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n strapi: {}\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":"ct-71d844"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-71d844"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"strapi"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Override default options:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n strapi: {\n baseURL: 'http://localhost:1337/uploads/'\n }\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":"ct-71d844"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-71d844"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"strapi"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"'http://localhost:1337/uploads/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"breakpoint"}]},{"type":"text","value":" modifier is used to specify the size of the image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, when the image is uploaded and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Enable responsive friendly upload"}]},{"type":"text","value":" Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Largest Dimension"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"small"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"medium"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"750px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"large"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1000px"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override the default breakpoints. See the "},{"type":"element","tag":"a","props":{"href":"https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Upload configuration"}]},{"type":"text","value":" in the Strapi documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don't set breakpoint modifier, the original image size will be used:"}]},{"type":"element","tag":"code","props":{"code":"\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-7cf262"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"strapi\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Define breakpoint modifier:"}]},{"type":"element","tag":"code","props":{"code":"\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-7cf262"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"strapi\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"{ breakpoint: 'small' }\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one breakpoint can be modified per image."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-52deb8{color:#D19A66}.ct-1d8f90{color:#98C379}.ct-7cb7e8{color:#E06C75}.ct-7cf262{color:#ABB2BF}.ct-71d844{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"modifiers","depth":2,"text":"Modifiers"}]}},"_type":"markdown","_id":"content:4.providers:strapi.md","_source":"content","_file":"4.providers/strapi.md","_extension":"md"},{"_path":"/providers/twicpics","_draft":false,"_partial":false,"_empty":false,"title":"Twicpics","description":"Nuxt Image internally use Twicpics as static provider","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"h2","props":{"id":"what-is-twicpics"},"children":[{"type":"text","value":"What is TwicPics?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image generation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the TwicPics Provider you can, out of the box, benefit from at least :"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance of our network: global CDN, optimized protocols and competitive caching"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ideal compression: modern technology and Next-Gen formats (TwicPics delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"WebP"}]}]},{"type":"text","value":" natively for accounting browsers and can also delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/AVIF","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And using the TwicPics API, you will be able to access all these features: "},{"type":"element","tag":"a","props":{"href":"#focus"},"children":[{"type":"text","value":"smart cropping with TwicPics focus auto"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#truecolor"},"children":[{"type":"text","value":"true color"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#flip"},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#turn"},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#crop"},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#zoom"},"children":[{"type":"text","value":"zoom"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"requirement"},"children":[{"type":"text","value":"Requirement"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The only requirement is to have a TwicPics account.\nIf you don't already have one, you can easily "},{"type":"element","tag":"a","props":{"href":"https://account.twicpics.com/signup/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"create your own TwicPics account for free"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"setup"},"children":[{"type":"text","value":"Setup"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You just need to configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your TwicPics "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/getting-started/subdomain/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Domain"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n twicpics: {\n baseURL: \"https:///\"\n // Feel free to use our demo domain to try the following examples.\n // baseUrl: 'https://demo.twic.pics/'\n }\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":"export default {\n image: {\n twicpics: {\n baseURL: \"https:///\"\n // Feel free to use our demo domain to try the following examples.\n // baseUrl: 'https://demo.twic.pics/'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"standard-properties"},"children":[{"type":"text","value":"Standard properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider complies with the documentation of "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-img","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" determines how the image is resized in relation to the parameters "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider supports all the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='__cover__'"}]},{"type":"text","value":" (default value)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image cropped to 300x300 while preserving aspect ratio."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image resized to 300x300 with distortion."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will bring your image back to a 300x600 area with respect to the ratio (1:1) using letterboxing."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The letterboxing strips are transparent areas. Feel free to select the color of your choice by using the "},{"type":"element","tag":"a","props":{"href":"#background"},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" property."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specifies the output format. It can be an image format or a preview format. By default, "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" will \"guess\" the best output format for the requesting browser, but you can use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" to change this behavior."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='avif'|'heif'|'jpeg'|'png'|__'webp'__"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WebP"}]},{"type":"text","value":" is the default format provided by "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" (if the browser supports it)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a blurry preview of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#output","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about format here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specifies the output quality as a number between 1 (poor quality) and 100 (best quality)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" considers "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=70 as default value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":": TwicPics automatically manages the returned quality according to the network performance for an optimized display speed even in difficult conditions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":" : when Data Saver is activated (android mobile only), default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=10."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=quality#truecolor","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about quality here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"background"},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" specifies a color that will show through transparent and translucent parts of the image. This will have no effect on images with no transparency nor translucency."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#color","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"color"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#background","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about background here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"twicpics-modifiers"},"children":[{"type":"text","value":"TwicPics modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard parameters, the specific features of the TwicPics API are accessible via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"A complete list of these features and their uses is accessible here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop"},"children":[{"type":"text","value":"crop"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" will extract a zone from the image which size is the given "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" size. If no coordinates are given, the focus point will be used as a guide to determine where to start the extraction. If coordinates are given, they will be used to determine the top-left pixel from which to start the extraction and the focus point will be reset to the center of the resulting image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ crop: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"size"}]}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@coordinates"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n/>\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n/>\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"flip"},"children":[{"type":"text","value":"flip"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":" will invert the image horizontally, vertically or both depending on the expression provided."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ flip: 'both'|'x'|'y' }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n/>\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n/>\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#flip","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"focus"},"children":[{"type":"text","value":"focus"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" will set the focus point coordinates. It doesn't modify the output image in any way but will change the behavior of further transformations that take the focus point into account (namely cover, crop and resize)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":" is used in place of actual coordinates, the focus point will be chosen automagically for you!"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ focus: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop-coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"coordinates"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"|'auto' }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":" : focus must be placed before the transformations modifying the output image (namely cover, crop and resize)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#focus","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"truecolor"},"children":[{"type":"text","value":"truecolor"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"truecolor"}]},{"type":"text","value":" can be used to prevent color quantization. If no boolean is provided, true is assumed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, quantization is allowed (truecolor=false)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Quantization occurs whenever the output format is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use truecolor if you want to distribute substantially larger but more accurate images with translucency to users on browsers with no "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"WebP"}]},{"type":"text","value":" support or when "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":" is required as output format."}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#truecolor","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"truecolor"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"turn"},"children":[{"type":"text","value":"turn"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":" will change the orientation of the image. It accepts an angle in degrees or an expression. Angles will be rounded to the closest multiple of 90°."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ turn: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"|'flip'|'left'|'right' }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#turn","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"zoom"},"children":[{"type":"text","value":"zoom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zooms into the image by a factor equal or superior to 1 towards the focus point while preserving the image size."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ zoom: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n\n\n/>\n\n\n/>\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\n/>\n\n\n/>\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#zoom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zoom"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"combination-of-parameters"},"children":[{"type":"text","value":"Combination of parameters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can combine several transformations of the "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics API"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Be aware that the order of the parameters can be significant."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of image for which we have, in order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"cropped the image from the center to 16:9 aspect ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then placed the focus on the center of interest of the cropped image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then rotate the image 90° to the left"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The result is a 9:16 (not 16:9) image with a possibly false area of interest."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your image for which we have, in order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placed the focus on the center of interest of the original image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then cropped the image to 16:9 from the center of interest"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then rotated the image 90° to the left"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The result is a cropped image with the area of interest retained and displayed in 16:9 format."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"dealing-with-image-ratio"},"children":[{"type":"text","value":"Dealing with image ratio"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's say you want to display an image in 4:3 aspect ratio with a width of 300px."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or, with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":"='auto'"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"go-further-with-twicpics"},"children":[{"type":"text","value":"Go further with TwicPics"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics offers a "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@twicpics/components","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"collection of web components"}]},{"type":"text","value":" that will allow you to exploit all its power :"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Pixel Perfect"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Layout Driven"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ideal Compression"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lazy Loading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"LQIP"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"CLS Optimization"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A specific integration to Nuxt is available "},{"type":"element","tag":"a","props":{"href":"https://github.com/TwicPics/components/blob/main/documentation/nuxt2.md","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"h2","props":{"id":"what-is-twicpics"},"children":[{"type":"text","value":"What is TwicPics?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image generation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the TwicPics Provider you can, out of the box, benefit from at least :"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance of our network: global CDN, optimized protocols and competitive caching"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ideal compression: modern technology and Next-Gen formats (TwicPics delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"WebP"}]}]},{"type":"text","value":" natively for accounting browsers and can also delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/AVIF","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And using the TwicPics API, you will be able to access all these features: "},{"type":"element","tag":"a","props":{"href":"#focus"},"children":[{"type":"text","value":"smart cropping with TwicPics focus auto"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#truecolor"},"children":[{"type":"text","value":"true color"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#flip"},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#turn"},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#crop"},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#zoom"},"children":[{"type":"text","value":"zoom"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"requirement"},"children":[{"type":"text","value":"Requirement"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The only requirement is to have a TwicPics account.\nIf you don't already have one, you can easily "},{"type":"element","tag":"a","props":{"href":"https://account.twicpics.com/signup/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"create your own TwicPics account for free"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"setup"},"children":[{"type":"text","value":"Setup"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You just need to configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your TwicPics "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/getting-started/subdomain/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Domain"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n twicpics: {\n baseURL: \"https:///\"\n // Feel free to use our demo domain to try the following examples.\n // baseUrl: 'https://demo.twic.pics/'\n }\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":"ct-4896f8"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4896f8"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0512a2"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0512a2"},"children":[{"type":"text","value":"twicpics"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0512a2"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"https:///\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-154189"},"children":[{"type":"text","value":"// Feel free to use our demo domain to try the following examples."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-154189"},"children":[{"type":"text","value":"// baseUrl: 'https://demo.twic.pics/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"standard-properties"},"children":[{"type":"text","value":"Standard properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider complies with the documentation of "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-img","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" determines how the image is resized in relation to the parameters "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider supports all the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='__cover__'"}]},{"type":"text","value":" (default value)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image cropped to 300x300 while preserving aspect ratio."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/football.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image resized to 300x300 with distortion."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/football.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"resize\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will bring your image back to a 300x600 area with respect to the ratio (1:1) using letterboxing."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"contain\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The letterboxing strips are transparent areas. Feel free to select the color of your choice by using the "},{"type":"element","tag":"a","props":{"href":"#background"},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" property."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"contain\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"background:"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\"red\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specifies the output format. It can be an image format or a preview format. By default, "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" will \"guess\" the best output format for the requesting browser, but you can use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" to change this behavior."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='avif'|'heif'|'jpeg'|'png'|__'webp'__"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WebP"}]},{"type":"text","value":" is the default format provided by "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" (if the browser supports it)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"avif\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a blurry preview of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"preview\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#output","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about format here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specifies the output quality as a number between 1 (poor quality) and 100 (best quality)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" considers "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=70 as default value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":": TwicPics automatically manages the returned quality according to the network performance for an optimized display speed even in difficult conditions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":" : when Data Saver is activated (android mobile only), default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=10."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=quality#truecolor","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about quality here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"background"},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" specifies a color that will show through transparent and translucent parts of the image. This will have no effect on images with no transparency nor translucency."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#color","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"color"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/icon-500.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"red\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"contain\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"background:"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"'red'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#background","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about background here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"twicpics-modifiers"},"children":[{"type":"text","value":"TwicPics modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard parameters, the specific features of the TwicPics API are accessible via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/path-to-nuxt-demo.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"props"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{key_1: value_1, ..., key_n: value_n}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"A complete list of these features and their uses is accessible here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop"},"children":[{"type":"text","value":"crop"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" will extract a zone from the image which size is the given "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" size. If no coordinates are given, the focus point will be used as a guide to determine where to start the extraction. If coordinates are given, they will be used to determine the top-left pixel from which to start the extraction and the focus point will be reset to the center of the resulting image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ crop: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"size"}]}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@coordinates"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n/>\n\n/>\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{crop:'500x100'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n/>\n\n/>\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/puppy.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{flip:'both'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\n/>\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{focus:'auto', crop:'500x500'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\n/>\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/peacock.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{truecolor:true}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\n/>\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/football.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{turn:'left'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\n/>\n\n\n/>\n\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cherry-3.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{zoom:1.5}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"