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.
Nuxt Image can be configured to work with any external image transformation service. Checkout the sidebar for a list of preconfigured providers.
If you are looking for a specific provider that is not already supported, you can create your own provider.
Nuxt Image will automatically optimize <NuxtImg> and <NuxtPicture> sources and accepts all options for specified targets, except for modifiers that are specific to other providers.
The default optimizer and provider for Nuxt Image is ipx. Either option can be used without any configuration.
Images should be stored in the public/ directory of your project.
For example, when rendering a <NuxtImg src="/nuxt-icon.png" />, your PNG file should be placed in the public/ directory under the path public/nuxt-icon.png.
For more information, you can learn more about the public directory.
assets/ directory are not processed with Nuxt Image because those images are managed by your bundler (such as Vite or webpack).Using the default provider, you can also optimize external URLs. For this, you need to add them to the domains option.
You can also add domains for remote images by setting the NUXT_IMAGE_DOMAINS environment variable to a comma-separated list of domains.
NUXT_IMAGE_DOMAINS="example.com,yourdomain.com"
You can set the default provider using the NUXT_IMAGE_PROVIDER environment variable.
Providers detected automatically:
It is possible to define your own provider, learn more about how to create a custom provider.