上层环境中包含内容丰富的资产 502 的下一个图像

Question

当我尝试在上层环境中使用内容丰富的图像源加载下一个图像时，会出现 502 错误。我已经使用 RemotePatterns 更新了我的下一个配置来处理这个问题，但它仍然得到 502。在我的本地一切正常。

版本：“下一个”：“13.4.3”，

const config = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.ctfassets.net',
        port: '',
        pathname: '/**',
      },
    ],
  },
}

      case contentful.types.jumbotron: {
        const transformedJumbotronData = transformJumbotron(section.data);
        console.log('https:' + transformedJumbotronData.image.url);
        //logs out https://images.ctfassets.net/ABC123/Full_image.png
        const desktopImage = (
          <Image
            src={'https:' + transformedJumbotronData.image.url}
            width={500}
            height={500}
            alt={transformedJumbotronData.image.alt}
          />
        );
        sectionComponents.push(
          <Jumbotron
            key={index}
            ctaButtons={transformedJumbotronData.ctaButtons}
            desktopImage={desktopImage} //accepts JSX element
            title={transformedJumbotronData.title}
          />
        );
        br

Answer 1

事实证明，next/image 只能接受特定分辨率的图像。所以我把图像缩小了很多然后就成功了。