Providers
IPX
IPX is the built-in and self hosted image optimizer for Nuxt Image.
Nuxt Image comes with a preconfigured instance of unjs/ipx - an open source, self-hosted image optimizer based on lovell/sharp.
Additional Modifiers
You can use additional modifiers supported by IPX.
Example:
<NuxtImg
src="/image.png"
:modifiers="{ grayscale: true, tint: '#00DC82' }"
/>
Runtime Configuration
You can update the options for ipx at runtime by passing the appropriate environment variable. For example:
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
ipx: {
baseURL: process.env.NUXT_IPX_BASE_URL || '/_ipx',
alias: {
someAlias: process.env.NUXT_IPX_ALIAS_SOME_ALIAS || ''
},
http: {
domains: process.env.NUXT_IPX_HTTP_DOMAINS,
},
},
},
})