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 sidebar for 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 <nuxt-img> or <nuxt-picture> sources and accepts all options for specified target, except for modifiers that are specific to other providers.

Default Provider

The default provider for Nuxt Image is ipx or static (for target: static). Either option can be used without any configuration.

Learn more about Nuxt deployment targets

Local Images

Images should be stored in the static/ directory of your project.

For example, when using <nuxt-img src="/nuxt-icon.png" />, it should be placed in static/ folder under the path static/nuxt-icon.png.

Image stored in the assets/ directory are not proccessed with Nuxt Image because those images are managed by webpack.

For more information, you can learn more about the static directory here .

Remote Images

Using default provider, you can also optimize external URLs. For this, you need to add them to domains option.

Environment Detection

You can set default provider using NUXT_IMAGE_PROVIDER environment variable. Providers below, are automatically detected:

Edit this page on GitHub Updated at Fri, Sep 10, 2021