Strapi v4 broken image, even when the image's link works (Cloudinary)

[AhmedAlSaey]

System Information

• Strapi Version: 4.0.2
• Operating System: MacOS
• Database: PostgreSQL
• Node Version: 16.5.0
• NPM Version: 7.19.1
• Yarn Version: 1.22.11

Hello everyone,
I have been trying to create a simple project where I can upload my images to Cloudinary using this package, the upload seems to be working fine and the images are stored as a Cloudinary URL. The problem is that he images appear to be broken when viewed from Strapi admin panel, but work anywhere else.
Below you can see that the images are broken, and that I can retrieve the image’s URL:

This is the link of the image in question:

I don’t know if it is required or not since the upload is already working, but here is the config/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: {
          folder: "homan",
          use_filename: true,
          unique_filename: false,
        },
        delete: {},
      },
    },
  },
});

Thanks in advance

[Eventyret]

Whats the 20 errors in your console ?

[AhmedAlSaey]

They seem to be errors related to my issue, I will start to investigate the issue, but here is the list of errors for now:

Error in text:
Refused to load the image ‘<image_url>’ because it violates the following Content Security Policy directive: “img-src ‘self’ data: blob:”.

[AhmedAlSaey]

Solution was found here: [v4]Content Security Policy issue of plugin-upload in strapi-4.0.0-beta.13 · Issue #11637 · strapi/strapi · GitHub

I wanted to write a more descriptive answer, but the anti-spam forum software won’t let me post due to “More than 1 link”. If you want to learn more about the issue, visit Mozilla MDN page on CSP: img-src. You simple have to change the security configuration for strapi in a middleware as seen in the link above.