NodeJS 什么错了?Next.js Image在服务器上不工作

643ylb08  于 2023-05-28  发布在  Node.js
关注(0)|答案(1)|浏览(160)

Next.js Image在服务器端不工作,但在本地主机上工作。

人们可以考虑权限,因为我从第三方域获取图像,但我在正常的img中加载图像,无论是在服务器上还是在本地主机上。
逻辑是这样的:我从域的一方与图片,图像的机器和他们的特点到我的数据库。并且已经从数据库中我反映了他们在图像组件。由于图像的权重很大,我应用了sizes属性。
我不明白原因是什么。我认为你需要配置从其他服务器接收图像,而不是从next.conf。但奇怪的是,为什么它需要一个字符的图像在一个普通的img。
我在这里读到https://nextjs.org/docs/pages/api-reference/components/image-legacy#remote-patterns
我的部署配置:Node + Next.js/Prisma

**Next.js和他< Image />在本地主机上的工作,但在服务器上我有这个:**x1c 0d1x
网络

<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.com'],
  },
};

升级next.js for 12.3.4后我的下一个配置:

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.com',
      },
    ],

},
};
abithluo

abithluo1#

我忘了在我的docker中添加两行重要的代码:

COPY next.config.js ./
    
 COPY --from=builder /app/next.config.js ./

相关问题