Next.js Image组件报错：缺少必填'src'属性（Strapi+Next.js环境）

环境：Strapi v4.11.5、Next.js 13.4.19

针对你遇到的「添加空值判断后错误消失，但图片URL显示为http://localhost:1044/undefined无法加载」的问题，核心原因是拼接图片URL时某个字段未正确获取到值，以下是具体排查和解决步骤：

1. 确认Strapi返回的图片数据结构 #

• 直接在浏览器访问你的Strapi API接口，查看图片字段的完整层级。Strapi v4中媒体字段的典型结构是：

  {
    "data": {
      "attributes": {
        "logo": {
          "data": {
            "attributes": {
              "url": "/uploads/logo_xxxx.png"
            }
          }
        }
      }
    }
  }
  

• 若你错误使用strapiData.logo.url而非strapiData.logo.data.attributes.url，就会拿到undefined。建议在代码中打印完整图片数据对象，确认有效URL的字段路径：

  console.log('Strapi图片数据:', strapiData.logo);
  

2. 修正URL拼接逻辑 #

• Strapi返回的图片URL通常是相对路径，需拼接Strapi服务器域名。确保拼接前先校验字段存在：

  // 正确获取相对路径
  const imageRelativeUrl = strapiData?.logo?.data?.attributes?.url;
  // 仅当相对路径存在时拼接完整URL
  const fullImageUrl = imageRelativeUrl ? `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageRelativeUrl}` : null;
  

3. 完善Image组件的渲染逻辑 #

• 仅当fullImageUrl有效时才渲染Image组件，避免无效渲染：

  {fullImageUrl && (
    <Image
      src={fullImageUrl}
      alt="Logo"
      width={200}
      height={200}
    />
  )}
  

4. 检查Strapi服务器配置 #

• 打开Strapi项目的config/server.js，确认url配置正确，这会影响Strapi返回的媒体URL格式：

  module.exports = ({ env }) => ({
    host: env('HOST', '0.0.0.0'),
    port: env.int('PORT', 1044),
    app: {
      keys: env.array('APP_KEYS'),
    },
    url: env('PUBLIC_URL', 'http://localhost:1044'), // 需和Strapi运行地址一致
  });
  

  配置正确后，部分场景下可直接使用Strapi返回的完整URL，无需手动拼接。

5. 验证Next.js环境变量 #

• 确认Next.js项目根目录的.env.local文件中配置了正确的Strapi地址：

  NEXT_PUBLIC_STRAPI_URL=http://localhost:1044
  

• 重启Next.js开发服务器，确保环境变量生效。

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