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',
},
],
},
};
1条答案
按热度按时间abithluo1#
我忘了在我的docker中添加两行重要的代码: