如何從循環中加載帶有 Next Image 的多個圖像？

Question

我有：

const TEMPLATE_TYPES = [
    {
        name: 'Blog Post',
        type: 'blog-post',
        img: '/img1.png'
    },...
];

后來，我對TEMPLATE_TYPES進行了循環：

{templateType.img && <img src={templateType.img} />}

但我想將其轉換為 Next.js 的<Image />標簽。 我將如何做到這一點？

謝謝！

Answer 1

來自 nextJs 文檔：

Next.js 可以在根目錄中名為 public 的文件夾下提供 static 個文件，例如圖像。 然后，您的代碼可以從基址 URL (/) 開始引用 public 中的文件。

只要您的圖像在公共文件夾中，您就不必導入它們，所以只需保持原樣即可。

// TEMPLATE_TYPES
img: '/img1.png'

但請記住：

注意：Next.js 只會提供構建時位於公共目錄中的資產。在運行時添加的文件將不可用。 我們建議使用 AWS S3 等第三方服務進行持久文件存儲。

有關更多信息，請參閱有關提供 static 內容的文檔。

另一件事，將來你可能想要從遠程域訪問文件，比如 aws bucket，在這種情況下你必須在next.config.js上添加域，如下所示：

// next.config.js file
module.exports = {
  images: {
    domains: ['example.com', 'example2.com'],
  },
}

有關更多信息，請查看此處

最后，您可以創建一個獲取 object 的組件並渲染您的圖像：

const RenderImage = (props) => {
  const images = props.images;
  return (
    <>
      {images.map((img, i) => (
        <div key={i}>
          <h4>{img.name}</h4>
          <Image src={img.img} width={500} height={300} />
        </div>
      ))}
    </>
  );
};

//Later somewhere on your code:
<RenderImage images={TEMPLATE_TYPES} />

上面的代碼只是一個示例，但我想您明白了，另請參閱api 文檔中關於圖像組件的內容。 希望我有所幫助！