Use Nuxt Image

Add Nuxt Image when the application needs generated srcset values, image format conversion, or a supported image provider. Nuxt Photo also works without it.

Install and register Nuxt Image

pnpm add @nuxt/image

export default defineNuxtConfig({
  modules: ['@nuxt/image', '@lupinum/nuxt-photo'],
  nuxtPhoto: {
    css: 'all',
    image: {
      provider: 'nuxt-image',
    },
  },
})

Nuxt Photo now sends its thumbnails and lightbox slides through Nuxt Image. The module order does not matter.

Use provider: 'auto' instead when the same configuration must also work without Nuxt Image. Automatic native fallback is quiet.

Allow remote image domains

The default Nuxt Image provider rejects remote sources unless their host is allowed:

export default defineNuxtConfig({
  modules: ['@nuxt/image', '@lupinum/nuxt-photo'],
  image: {
    domains: ['images.example.com'],
  },
  nuxtPhoto: {
    css: 'all',
    image: { provider: 'nuxt-image' },
  },
})

Add hostnames without https:// or a path. See the official Nuxt Image domain configuration for the current provider rules.

Tune thumbnails and slides separately

export default defineNuxtConfig({
  modules: ['@nuxt/image', '@lupinum/nuxt-photo'],
  nuxtPhoto: {
    image: {
      provider: 'nuxt-image',
      thumb: {
        sizes: 'sm:100vw md:50vw lg:400px',
        quality: 75,
      },
      slide: {
        widths: [960, 1440, 1920, 2560],
        quality: 85,
      },
    },
  },
})

Thumbnail sizes tells Nuxt Image how much layout width an image uses. Lightbox widths controls the generated full-screen candidates. Keep both aligned with the sizes the application actually renders.

Check the result

Inspect a rendered image. Its src should use the selected Nuxt Image provider and its srcset should contain the configured widths. If local images work but remote images fail, check image.domains before changing Nuxt Photo settings.

Image delivery explains native delivery, placeholders, loading behavior, and custom adapters.