无效的 src 属性 Next.JS S3 和 cloudfront

Question

我将图像存储在 S3 上并使用 CloudFront 分发图像。

我有两个网站。一个是使用 Sveltekit 构建的，另一个是使用 NextJS 构建的。

使用 Svelte，图像可以正常加载，但使用 NextJS，我收到此“无效的 src prop”错误。

我在 next.config.js 中添加了此代码，并将“example.com”替换为“cloudfront.net”，但不起作用，因此我尝试使用“aws.amazon.com”，但也不起作用。

我必须输入什么域名？我还需要在路径名中添加一些内容吗？

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '',
      },
    ],
  },
}

Answer 1

要解决通过 CloudFront 从 S3 获取图像时 Next.js 中的“无效 src prop”错误，您需要配置 next.config.js 以将您的 CloudFront 域识别为从中加载图像的有效域。您正在寻找的配置是 images.domains。

您可以使用以下示例配置：

module.exports = {
  reactStrictMode: false,
  swcMinify: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
  images: {
    domains: ['cloudfront.net'],
  },
}

在图像配置中：

1. 未优化：true设置允许使用外部图像 没有 Next.js 的优化功能。
2. 域数组应包含您正在加载图像的任何域 来自，包括您的 CloudFront 域 ('cloudfront.net')。

请记住，出于安全原因，最好对您的域进行具体说明。因此，如果您有特定的 CloudFront URL（例如“d12345abcdegh.cloudfront.net”），则不应使用通用的“cloudfront.net”，而应该使用它。