Next.js使用Image组件出现<link rel=preload>无效imagesrcset错误原因

架构老林

2026-10-5

报错原因

该报错由Next.js Image组件的预加载逻辑触发：

你给Image组件设置了priority={true}属性，Next.js会自动生成<link rel="preload">标签预加载这张图片，用于优化首屏LCP性能
你使用的是外部域名下的图片，没有在next.config.js中配置对应的外部图片白名单规则，Next.js无法为这张外部图片生成合法的srcset值，最终导致预加载标签的imagesrcset属性格式错误，抛出报错
图片可以正常渲染是因为Image组件的基础渲染逻辑不受预加载逻辑影响，仅预加载步骤失败而已

解决方案

可根据需求任选一种方案修复：

方案1：配置外部图片白名单（最推荐）

在项目根目录的next.config.js中添加对应域名的访问规则：

// next.config.js
module.exports = {
  images: {
    // Next.js 13+ 版本使用remotePatterns配置
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'ticket-t01.s3.eu-central-1.amazonaws.com',
        pathname: '/**',
      },
    ],
    // Next.js 12及更早版本使用domains配置
    // domains: ['ticket-t01.s3.eu-central-1.amazonaws.com']
  }
}

配置完成后重启项目即可，Next.js会正常生成srcset和预加载标签，报错自动消失。

方案2：关闭图片优化

如果不需要响应式图片能力，可以给Image组件添加unoptimized={true}属性，让Next.js直接使用你传入的src地址，不做优化处理：

<Image
  src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`}
  className={styles.carouselImage}
  layout="responsive"
  width={865}
  height={513}
  key={`${props[organizationId].events[programId].imgId}`}
  priority={true}
  unoptimized={true}
/>