Strapi媒体库图片显示异常，Next.js访问返回404错误

1. 修正数据库中媒体文件的存储路径 #

Strapi 4会在upload_file表中保存文件的完整访问路径，生产环境的域名/端口和开发环境不一致，直接迁移后会导致路径失效。执行以下SQL语句批量替换路径：

UPDATE upload_file 
SET url = REPLACE(url, 'https://你的生产域名.com/uploads/', 'http://localhost:1337/uploads/'),
provider_metadata = REPLACE(provider_metadata, 'https://你的生产域名.com/uploads/', 'http://localhost:1337/uploads/');

注意把语句中的生产域名和开发环境Strapi地址（默认是localhost:1337）替换成实际值。

2. 检查文件权限与目录完整性 #

• 给开发环境的public/uploads文件夹赋予读写权限：

  chmod -R 755 public/uploads/
  

• 确认迁移过来的文件目录结构和生产环境完全一致，Strapi 4会按日期分目录存储文件，要确保所有子目录都完整复制。

3. 清除Strapi缓存并重启服务 #

Strapi会缓存媒体库索引，迁移后需要重置缓存：

• 删除项目根目录下的.cache和build文件夹
• 重启Strapi开发服务：

  npm run develop
  

4. 调整Next.js的资源访问配置 #

• 确保Next.js代码中使用开发环境的Strapi地址拼接图片路径，不要硬编码生产环境地址
• 如果使用next/image组件，需要在next.config.js中添加允许的图片域名：

  module.exports = {
    images: {
      domains: ['localhost', '你的开发Strapi地址'],
    },
  }
  

5. 验证Strapi中间件配置 #

你的strapi::security配置已经放宽了资源限制，可再检查：

• 确认middlewares.js中该配置无语法错误，且正确加载
• 临时注释其他自定义中间件，排查是否存在冲突

内容的提问来源于stack exchange，提问作者Leyla Mammadova