NextJS+Strapi项目中Cloudinary图片渲染404错误求助

问题现象 #

渲染Cloudinary图片时出现404错误，报错信息：

upstream image response failed for https://res.cloudinary.com/djpxkfscg/image/upload/v1682152278/thumbnail_61_Mt_Y773_Mt_L_SL_1200_a5da8bdb0f.jpg 404

使用的NextJS Image组件代码：

<Image alt="ecommerce" className="h-full flex justify-center mx-auto" width={500} height={500} src={item.attributes.image.data.attributes.formats.thumbnail.url} />

可正常访问的示例图片URL：https://res.cloudinary.com/djpxkfscg/image/upload/v1682152223/thumbnail_91z_Mokv_C_Nu_L_SL_1500_71907fafc4.jpg

可能的原因及解决方法 #

1. 目标图片资源不存在 #

报错中的URL和可访问URL是不同资源，先验证报错URL的有效性：

• 直接在浏览器打开报错的URL，若返回404，说明该图片在Cloudinary中已被删除或从未上传成功。
• 检查Strapi对应的媒体条目，确认图片是否正确关联，是否存在上传失败记录。

2. NextJS Image组件域名未配置 #

NextJS的next/image组件需要在配置文件中声明允许的外部图片域名，否则会拦截请求导致404：

• 打开next.config.js，添加Cloudinary域名到images.remotePatterns：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '/djpxkfscg/image/upload/**',
      },
    ],
  },
}

module.exports = nextConfig

• 配置完成后重启NextJS开发服务，重新测试图片渲染。

3. Strapi返回的URL格式异常 #

确认Strapi返回的formats.thumbnail.url是否为完整绝对URL：

• 在浏览器控制台打印item.attributes.image.data.attributes.formats.thumbnail.url，检查实际输出的URL是否存在拼写错误或相对路径问题。
• 若为相对路径，需在Strapi中配置媒体库的绝对URL前缀，或在前端手动拼接完整域名。

4. Cloudinary资源权限限制 #

检查Cloudinary中目标图片的访问权限：

• 登录Cloudinary后台找到对应资源，确认是否设置了私有访问（需要签名URL）。若是，需在前端生成带签名的URL后再传入Image组件。

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