Next.Js 图像组件无法在本地主机上加载图像

Question

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

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

生产时，可以看到图像

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

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

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

Answer 1

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

   import Image from 'next/image'

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

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

虽然快速修复可以将unoptimized={true}属性添加到图像组件（不建议用于生产版本）

欲了解更多信息，请查看此处Nextjs 图像文档