Next.Js 图像组件不会在 localhost 上加载图像

Posted 2023-03-06

【中文标题】Next.Js 图像组件不会在 localhost 上加载图像

【英文标题】：Next.Js Image Component does not load image on localhost

【发布时间】：2021-08-05 04:40:10

【问题描述】：

我已经在next.config.js 上设置了图像域，但是图像没有显示在本地主机上。但是，当代码推送到生产环境时，图像会在 vercel 上加载。

在本地主机上，我得到下面的图片。图片无法加载。

制作时可以看到图片

我应该怎么做才能看到正在开发的图像？

module.exports = 
    images: 
        domains: [ 'd31wtm2rx76rut.cloudfront.net'],
    ,

<NextImage
    src=https://d31wtm2rx76rut.cloudfront.net/1604303981874
    
    layout="fill" />

【问题讨论】：

在本地运行应用程序时，图像是否使用与生产中相同的 URL 域 (d31wtm2rx76rut.cloudfront.net)？

是的，图片的 URL 域相同

【参考方案1】：

不确定旧的 nextjs 版本，但现在 nextjs 中的图像组件如下：

import Image from 'next/image'

<Image
src="https://d31wtm2rx76rut.cloudfront.net/1604303981874"

layout="fill" />

导出是正确的。希望它有效:)

虽然可以将 unoptimized=true 道具添加到图像组件（不推荐用于生产构建）

更多信息请点击此处Nextjs Image Doc