Nuxt•7mo ago

How to configure multiple providers of same type in nuxt-image

I have the need to access several different Cloudinary clouds (with different baseURLs) from my Nuxt app using the Image module. I can't seem to figure out a way to configure multiple different Cloudinary providers in nuxt.config.ts however. Am I missing an obvious config method for doing this, or is there some other workaround I could try? For example, say I have 2 separate Cloudinary clouds: https://cdn1.example.com/images/upload and https://cdn2.example.com/images/upload. In nuxt.config.ts, I can configure one of them like:

{
  image: {
    cloudinary: {
      baseURL: 'https://cdn1.example.com/images/upload'
    }
  }
}

{
  image: {
    cloudinary: {
      baseURL: 'https://cdn1.example.com/images/upload'
    }
  }
}

but there is no way to also have cdn2.example.com configured. Even with a default cloudinary url (not using cdn), there's no way to configure multiple clouds, for example: - https://res.cloudinary.com/my-cloud-1/images/upload - https://res.cloudinary.com/my-cloud-2/images/upload If you try nuxt.config.ts:

{
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com'
    }
  }
}

{
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com'
    }
  }
}

and then try setting your source in an image to the correct cloud:

<NuxtImg src="my-cloud-1/images/upload/path/to/image.jpg" />

<NuxtImg src="my-cloud-1/images/upload/path/to/image.jpg" />

then transformations will not work because they are appended after the baseURL and need to come after the <cloud-name>/images/upload instead.

1 Reply

Mark BrouchOP•7mo ago

I opened a pull request that allows full cloudinary urls to be used as src: https://github.com/nuxt/image/pull/1361

GitHub

feat: support cloudinary urls as src by markbrouch · Pull Request #...

Adds the ability for a full cloudinary url to be used as src instead of relying on baseURL to construct the image url. For example: <NuxtImg src="https://res.cloudinary.com/example/image/up...

Gaming

Programming

How to configure multiple providers of same type in nuxt-image