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

Question

我已经设置了图像域，next.config.js但图像没有显示在 localhost 上。但是，当代码推送到生产环境时，图像会加载到 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