Strapi with Cloudinary Provider, base URL with /image/upload/ issues

cthom-dev commented 2 years ago

When using Strapi with Cloudinary, when you query Strapi and get back an image entity, you get the full URL to Cloudinary. If I use the following in nuxt.config.js

    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<cloudname>/image/upload/'
    }
  }

and then in my component use the following, where property url is Cloudinary absolute URL <nuxt-img :src="element.icon.data.attributes.url" />

this is then the src value: https://res.cloudinary.com/xxxxx/image/upload/f_auto,q_auto/https://res.cloudinary.com/xxxxx/image/upload/vxxx/logo.png

The src value is then baseURL + transformations + Cloudinary absolute URL, so I don't get the image.

I can get the following values from Strapi API for image:

name: String!
alternativeText: String
caption: String
width: Int
height: Int
formats: JSON
hash: String!
ext: String
mime: String!
size: Float!
url: String!
previewUrl: String
provider: String!
provider_metadata: JSON
related: [GenericMorph]
createdAt: DateTime
updatedAt: DateTime

Thanks for any help !

package.json

  "name": "nuxt strapi project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
  },
  "dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.19.3",
    "graphql-tag": "^2.12.6",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxt/image": "^0.6.2",
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/google-fonts": "^2.0.0",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "@teamnovu/nuxt-breaky": "^1.2.2",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.14",
    "prettier": "^2.5.1",
    "tailwindcss": "^3.1.2"
  }
}

martinkosmela commented 2 years ago

Hey @cthom-dev, have you managed to get any solution for this problem? I'm facing the same issue with Strapi / Cloudinary

cthom-dev commented 2 years ago

Hey @cthom-dev, have you managed to get any solution for this problem? I'm facing the same issue with Strapi / Cloudinary

Using data.attributes.hash instead of data.attributes.url seems to work

nuxt / image

Strapi with Cloudinary Provider, base URL with /image/upload/ issues #520

package.json