javascript - 如何在 react 中渲染具有不同 src 的多个图像元素

Question

这是我正在尝试做的事情:

imageArray = ["../images/a.png", "../images/b.png"];

function renderImages(number){
  const imageElements = [];
  for(let i = 0; i < number; i++){
      const imageSrc = imageArray[i];
      imageElements.push(<img src={ require(imageSrc) } alt=""/>);
  }
  return imageElements;
}

代码工作正常，问题是图像源，我可以放一个静态图像源并且它会工作(我试过了)，但是当源是动态的(数据来自数组，数组来自 json文件)不起作用。有什么解决办法吗？

提前致谢!

编辑:

我得到的错误是:错误:找不到模块“。”。

这可能是 webpack 的问题

解决方案

对于有同样问题的人，我可以通过以下链接解决这个问题:Dynamically import images from a directory using webpack

Answer 1

创建一个模块将所有图像导出为图像列表

var cache = []; 

function importAll (r) { 
r.keys().forEach((key,index) => cache[index] = r(key));
} 
importAll(// your json here);

export default cache;

在你的主模块中

import * as images from // whatever you name the module

var imageList = images.default
// Use imageList[I]

发生这种情况是因为 React 使用 webpack 进行捆绑，并且每个图像都将特定于新捆绑的服务器。

要以 React 方式导入单个图像，请使用:

import image from //path to the image

PS:如有错别字请见谅。我正在使用手机输入此答案。