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

Question

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

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

制作时可以看到图片

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

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

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

Answer 1

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

   import Image from 'next/image'

   <Image
   src="https://d31wtm2rx76rut.cloudfront.net/1604303981874"
   alt="Khanna"
   layout="fill" />
   

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

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

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