Next.js接入S3+CloudFront遇invalid src prop错误求解决方案

DevOps 小满

2026-7-30

Next.js加载CloudFront分发的S3图片报“invalid src prop”问题解决

核心错误原因

你填的hostname不对——不能用通用的cloudfront.net或aws.amazon.com，必须填你的CloudFront分配专属的域名（比如d123456abcdef.cloudfront.net），这是Next.js图片安全校验的硬性要求。

正确配置示例

假设你的CloudFront专属域名是d123456abcdef.cloudfront.net，图片在CloudFront上的访问路径以/images/开头，配置如下：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'd123456abcdef.cloudfront.net',
        port: '',
        pathname: '/images/**', // 匹配该域名下所有/images开头的路径
      },
    ],
  },
}

关键细节

hostname必须精确匹配：CloudFront每个分配都有唯一域名（也可绑定自定义域名），Next.js需要明确指定这个具体域名，通用的cloudfront.net属于泛域名，不会通过校验。
pathname按需配置：如果你的图片集中在特定路径下，配置pathname可以缩小允许范围，提升安全性；如果图片分布在整个域名下，用/**即可匹配所有路径。
自定义域名场景：如果给CloudFront绑定了自定义域名（比如cdn.yourdomain.com），直接填这个自定义域名作为hostname就行。