Next JS Image Component适用于静态图片文件，但动态url无法加载图片

Question

我正在使用 NextJS<Image />组件。我使用本地图像源和外部 API 源。一切都在我的本地开发环境中运行，但是一旦我将其托管在服务器上进行生产，来自 API 的动态图像就不会显示。

<Image
  src="house.jpg"   // loaded from local and works fine
  alt="Picture of my house."
  width={250}
  height={250}
/> 

下面的代码适用于开发环境，但不适用于生产服务器。

const renderHouses = (apiHouses) => (
   apiHouses.map(house => (
      <div key={house.id}>
         <Image
           src={house.img}   // not working (loading) on production server
           alt={`Picture of ${house.name}`}
           width={250}
           height={250}
         /> 
      </div>
   ))
)

Answer 1

是的，它适用于您的本地主机，但如果您未在文件domain中指定名称，则外部图像将不会加载到生产环境中next.config.js。

module.exports = {
  images: {
    domains: ['localhost','yourDomainName.com'],
  },
};

您可以在这里找到更多信息。