使用next/image加载props传递的Strapi图片源时报缺少src属性错误

你遇到的Image组件报错，核心触发逻辑不是CDN配置问题，而是传入next/image组件的src值在部分渲染场景下为undefined。

Next.js 内置Image组件的源码校验规则为：只要传入的src值是undefined、null或空字符串，就会被判定为缺少必需的src属性，同时错误日志里仅打印有效非空的props字段——这和你看到的报错（日志仅显示width、height，无src）完全匹配。

你当前代码里写的post.images[0]?.url存在多个会返回undefined的场景：

• 某条资讯post未关联任何封面图，images字段为空数组
• images数组有值，但第一个元素为空对象
• Strapi返回的图片URL字段嵌套层级和你预期不一致，不存在images[0].url这个路径

只要上述任意一个场景命中，src就会是undefined，直接触发校验报错，和你在next.config.js里配置了多少CDN规则无关——CDN配置仅处理有效字符串格式的图片路径，对undefined值没有兜底作用。

• 第一步：给Image的src值增加多层兜底逻辑，杜绝undefined传入
  不要直接将可选链计算的结果直接传给Image组件，提前完成非空校验和路径拼接：

  {posts.map((post) => {
    // 提前提取并校验图片值
    const cover = post.images?.[0];
    // 无有效图片时用本地兜底图替代
    const imageSrc = cover?.url 
      ? cover.url.startsWith('http') 
        ? cover.url 
        : `${process.env.NEXT_PUBLIC_CDN_ORIGIN}${cover.url}`
      : '/default-post-cover.png';
    
    return (
      <Link key={post.id} href={`/news/${post.id}`}>
        <a className={styles.postSliderLink}>
          <article>
            <Image 
              src={imageSrc} 
              alt={cover?.alternativeText || '资讯封面'} 
              width={376} 
              height={190} 
              layout="fixed" 
            />
          </article>
        </a>
      </Link>
    )
  })}
  

• 第二步：核对next.config.js的远程图片域名配置
  Next.js Image组件加载远程图片时，要求对应的域名必须预先在配置中声明，否则无法正常加载：

  // next.config.js 示例配置
  module.exports = {
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: '你的CDN服务域名',
        },
        {
          protocol: 'https',
          hostname: '你的Strapi服务域名',
        }
      ],
    },
  }
  

• 第三步：拉取Strapi数据后先校验结构
  在getStaticProps接口返回数据后，可以先打印单条post的images字段结构，确认图片URL的实际嵌套层级，避免因为字段路径写错导致取不到值。

原生HTML的img标签没有强制的props校验逻辑，当src为undefined时，浏览器会自动将src置为空值，仅显示图片裂图的占位状态，不会抛出阻断渲染的错误。这也是你感觉“换成原生img就正常”的本质——并不是逻辑完全通顺，而是空值被浏览器静默处理了，没有弹出报错而已。

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