Broken Image Upload using DigitalOcean Spaces

[javdevruent]

OS: win32-x64 Strapi Version: 4.25.10 Node: v20.17.0 NPM: 10.0.0

PROJECT TYPE: JAVASCRIPT

Im configuring strapi upload I follow the documentation and use these below configurations

/config/plugin.js `

/config/middleware.js

I manage to upload the images using the obove donfiguration but the problem is when displaying it, Strapi show a broken images like this

There are no error showing in console tab,

But this is the error when you check it in network tab,

Im stuck , can someone help me with this issue?

[guymunday]

I think the issue is that you are including "https://" in your middlewares security directives. Failing that you could try changing your middlewares.js directives to a wildcard like this:

  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "*.digitaloceanspaces.com",
            "*.strapi.io",
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "*.digitaloceanspaces.com",
            "*.strapi.io",
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },