Search code examples
nuxt.jscloudinary

Nuxt Cloudinary Module: Get broken image when fetching image not hosted on Cloudinary

I am trying to fetch and optimize an image not hosted on Cloudinary. I am following the docs as listed here:

https://cloudinary.nuxtjs.org/snippets#fetch-and-optimize-an-image-not-hosted-in-cloudinary

I have a vanilla Nuxt sandbox set up and trying to get this to work:

https://codesandbox.io/s/cranky-lake-py250?file=/components/Tutorial.vue

As you can see, the image is broken when fetched. Any ideas what I am doing wrong? I have the nuxt config js file set up like so:

  modules: ["@nuxtjs/cloudinary"],
  cloudinary: {
    cloudName: "dtzsbdaxt",
    useComponent: true
  },

If I missing any other options that should be listed there, please let me know., Thanks!

Solution

  • As a general answer, this issue can occur in 2 cases:

    1. Either the Fetched URL settings is restricted (checkbox) under Settings>Security - Restricted Media files,
    2. Or a domain is set under the Allowed fetch domains under Settings>Security which was your case.

    You can find the documentation reference here: https://cloudinary.com/documentation/fetch_remote_images#restricting_the_allowed_fetch_domains (cf note for option1)