I copied images from the PROD CMS public/uploads folder and PROD CMS DB to the DEV environment. Now, the images are broken. But if I upload images through the admin panel, then the images work well. Also from my Next.js project I can’t access these images. The links to the images show a 404 error.
MySQL Node 16 Strapi 4 Next JS
I tried to add config to strapi::security in middlewares.js, not work for me.
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "http:", "https:", "*"],
"img-src": ["'self'", "data:", "blob:", "*"],
"media-src": ["'self'", "data:", "blob:", "*"],
upgradeInsecureRequests: null,
},
},
},
},
To get a 404 on the /uploads/:filename in your Browser or in your Next.JS application, it means that the :filename that you are using is incorrect, or that the file is not in the /uploads folder of your application.
As you can see in this short video I made: https://www.loom.com/share/0e0752ff8c1c4b6783c99bc2d89f989a?sid=0be8acf8-f1e5-4b4b-84d0-4a94ed4f43e5
The access of the file itself is not due to any database transfer. Just, is the file exist is the "uploads" folder.
Then for the admin, I did a video that shows you how it works, mix between data in the DB, what is the data that matter (in the Format column), and the name of the files that are uploaded in the "uploads" folder.
https://www.loom.com/share/e886a9c3c95a475aa6c1c434ea7787cf?sid=c598c0b2-4a01-4591-b3cd-a751630aafb3
If when you upload new files in your application it works, it's not related to a security policy, other wise it should not work at all.
I hope it helped.