What is the difference between the options 'domains' and 'provider'?

[ghost]

Let me ask you a question.
I'm trying to adopt nuxt/image with Nuxt3 and Contentful. I learned that setting providers is necessary to get remote images from the CMS's server, but what is the difference between domains, provider, and baseURL?

Tell me which part of the code below is duplicated?

export default defineNuxtConfig({
  modules:["@nuxt/image"],
  image: {
    domains: ['images.ctfassets.net'],
    contentful: {
      baseURL: 'https://images.ctfassets.net'
    },
  },
});

<div class="wrapper">
  <NuxtImg provider="contentful" format="webp" :src="hoge.file.url"/>
</div>

[yudin-s]

They solve different parts of the problem:

• provider decides how Nuxt Image builds/optimizes the image URL.
• baseURL is provider-specific configuration, usually the origin/prefix that provider should use.
• domains is an allow-list for remote image hosts, mainly relevant when the default/IPX-style optimizer fetches remote images.

In your example, this part configures the Contentful provider:

contentful: {
  baseURL: 'https://images.ctfassets.net'
}

and this tells Nuxt Image to use that provider for the component:

<NuxtImg provider="contentful" :src="hoge.file.url" />

domains: ['images.ctfassets.net'] may be redundant if every Contentful image is always handled through the contentful provider. It becomes useful if you also pass full remote URLs through a provider/path that needs host allow-listing.

So the mental model is: provider is the strategy, baseURL is that strategy's origin, domains is remote-host permission for fetch/optimization paths.