Cloudinary + Strapi front-end image load problem

Questions and Answers
1

My images from cloudinary are not uploading to the front-end side to localohost 3000. Not visible for the client but are accessible in console.log.

plugins.js

module.exports = ({ env }) => ({
** // …**
** upload: {**
** config: {**
** provider: ‘cloudinary’,**
** providerOptions: {**
** cloud_name: env(‘CLOUDINARY_NAME’),**
** api_key: env(‘CLOUDINARY_KEY’),**
** api_secret: env(‘CLOUDINARY_SECRET’),**
** },**
** actionOptions: {**
** upload: {},**
** delete: {},**
** },**

** },**
** },**
** // …**
});

The rest of information is retrieved from the server successfully. ( Product price, description etc)

I keep receiving incorrect URL for the dynamic data which is:

http://localhost:1337https://res.cloudinary.com/devqsoqp4/image/upload/v1678231275/miracle_serum_80c6ec149a.png

image display error
image display error1920×1200 183 KB

What do I need to change in plugins.js file ?

Thanks in advance for help !

2

Do you add anyting in front of it in the frontend or do you only use the raw anwer

3

Hi,

maybe the solution is in this article (step 4).

1 Like
5

Hi, no I do not need this hindrance in front which is strapi link to the server. Upload of image is only successful when I remove strapi link manually.

6

Hi, agi.

I have the same middlewares.js set up but also with the CORS issue fix as you can see: It did not do the job, which is why I tend toward the option of adjusting something in plugins.js file

Chat GTP gives me different solutions all the time, and on the web, I can’t find additional info.

module.exports = [
{
name: ‘strapi::cors’,
config: {
enabled: true,
headers: ‘*’,
expose: [‘WWW-Authenticate’, ‘Server-Authorization’],
methods: [‘GET’, ‘POST’, ‘PUT’, ‘PATCH’, ‘DELETE’, ‘OPTIONS’]
},
},
‘strapi::errors’,
{
name: ‘strapi::security’,
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
‘connect-src’: ["‘self’", ‘https:’],
‘img-src’: ["‘self’", ‘data:’, ‘blob:’, ‘res.cloudinary.com’],
‘media-src’: ["‘self’", ‘data:’, ‘blob:’, ‘res.cloudinary.com’],
upgradeInsecureRequests: null,
},
},
},
},
‘strapi::poweredBy’,
‘strapi::logger’,
‘strapi::query’,
‘strapi::body’,
‘strapi::session’,
‘strapi::favicon’,
‘strapi::public’,
];

7

Hi @ampodo,

I think your plugins.js is correct, it is looks like mine which is working.
I’m using this plugin: @strapi/provider-upload-cloudinary

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
      actionOptions: {
        upload: {},
        delete: {},
      },
    },
  },
});

In my new project I put this code in the middlewares.js, but I want to use httpOnly cookie for authentication.

module.exports = [
  {
    name: "strapi::cors",
    config: {
      enabled: true,
       origin: ["http://localhost:1337"],
      expose: ["WWW-Authenticate", "Server-Authorization"],
      credentials: true,
      methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"],
      headers: [
        "Content-Type",
        "Authorization",
        "X-Frame-Options",
        "access-control-allow-origin",
      ],
    },
  },
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          "media-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

In the frontend I have a base_url=‘http://localhost:1337’ and for example my request looks like this:
const response = await axios.get(
${base_url}/api/blogs?filters[slug]=${page}&populate=*
)

But I haven’t tested my new code for Cloudinary yet, but before this code is worked properly with Cloudinary. I’ll try it this weekend.

8

Hi friend, please how were you able to resolve this issue?

9

I was able to resolve this. The problem was coming from the item/Object/product jxs file itself where defining image source eg

src={http:localhost1337/${url}},

Change to:

src={`${url}'}

Restart your server.

Happy coding