When deploying your Nuxt applications to Netlify's composable platform, the image module uses Netlify Image CDN to optimize and transform images on demand without impacting build times. Netlify Image CDN also handles content negotiation to use the most efficient image format for the requesting client.
This provider is automatically enabled in Netlify deployments, and also when running locally using the Netlify CLI.
You can also manually enable this provider. To do so, set the provider to netlify or add the following to your Nuxt configuration:
export default defineNuxtConfig({
image: {
provider: 'netlify'
}
})
To test image transformations locally, use Netlify Dev. This feature of the Netlify CLI runs a local development server that mimics the Netlify production environment, including Netlify Image CDN.
To transform a source image hosted on another domain, you must first configure allowed domains:
export default defineNuxtConfig({
image: {
provider: 'netlify',
domains: ['images.example.com']
}
})
Beyond the standard properties, you can use the Netlify Image CDN position parameter as a modifier for Nuxt Image.
<NuxtImg
provider="netlify"
src="owl.jpg"
height="400"
width="600"
fit="cover"
format="webp"
quality="80"
:modifiers="{ position: 'left' }"
/>
provider: 'netlify' in your Nuxt configuration, then this will be detected at build time and Large Media continues to work on your site as usual. You can also explicitly enable it by setting provider: 'netlifyLargeMedia'. However, new Large Media configuration is not recommended.To migrate from the deprecated Netlify Large Media option to the more robust Netlify Image CDN option, change provider: 'netlify' to provider: 'netlifyImageCdn'. This will enable the Netlify Image CDN service, even if large media is enabled on your site.
If you're not ready to migrate to the more robust Netlify Image CDN option, Netlify continues to support dynamic image transformation for all JPEG, PNG, and GIF files you have set to be tracked with Netlify Large Media.
In addition to height and width, the deprecated Netlify Large Media provider supports the following modifiers:
fitcontaincontain (equivalent to nf_resize=fit) and fill (equivalent to nf_resize=smartcrop)