怎么了？ Next.js 图像不能在服务器上工作

能在服务器上工作"/>

怎么了？ Next.js 图像不能在服务器上工作

Next.js Image 在服务器上不起作用，但在本地主机上有效。

可以考虑权限，因为我从第三方域获取图像，但是我在服务器和本地主机上正确加载常规 img 中的图像。

逻辑是这样的：我从域端获取图片、图像 的机器和他们的特点进入我的数据库。并且已经 从数据库中，我将它们反映在图像组件中。因为 图像的重量很大，我应用了尺寸属性。

我不明白这可能是什么原因。我认为你需要配置从其他服务器接收图像，而不是 next.conf。但是奇怪的是为什么它在常规 img 中获取角色图像。

我在这里阅读

我的部署配置文件：Node + Next.js/Prisma

Next.js 和他的 < Image /> 它在本地主机上工作但在服务器上我有这个：

网络

<Image
                                    src={car.picture[0]}
                                    alt={car.picture[0]}
                                    layout="fill"
                                    sizes="(max-width: 750px) 50vw,
                                            (max-width: 828px) 40vw,
                                            (max-width: 1080px) 33vw,
                                            20vw"
                                    loading="lazy"
                                /> 

这是通常的< img />。它在服务器或本地主机上工作，但图像大小惊人：

<img
                            loading="lazy"
                            decoding='async'
                            src={car.picture[0]}
                            className="cardImg">
                        </img> 

在 next.config.js 中添加了一个带有 img 的第三方域：

const nextConfig = {
  reactStrictMode: true,
};

module.exports = {
  ...nextConfig,
  images: {
    domains: ['mydomaineImg'],
  },
};

为 12.3.4 升级 next.js 后我的下一个配置：

const text Config = {
  react StrictMode: true,
  ignore Build Errors: true,
  ignore During Builds: true,
}

module.exports = {
  ......next Config,
  
  images: {
    remote Patterns: [
      {
        protocol: 'https',
        hostname: 'mydomaineImg',
      },
    ],

},
};