如何在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问题

解

对于有相同问题的人，我可以通过以下链接解决此问题： 使用webpack从目录动态导入图像

Answer 1

试试这个

Json文件data.json

{ 
 imageArray : ["../images/a.png", "../images/b.png"]
}

像这样更改代码

const data = require('./data.json');
const imageArray = data.imageArray;


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

Answer 2

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

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进行捆绑，并且每个映像都特定于新捆绑的服务器。

要导入单个图像的反应方式，请使用：

import image from //path to the image

PS：如果有错别字，抱歉。 我正在使用手机输入此答案。

Answer 3

我不确定您的项目环境是什么，所以即使您使用的是标准的MERN堆栈 ，我也会在回答，尽管它们的核心内容仍然不正确。

首先，您尝试使用../images/a.png类的绝对路径，不建议这样做。

您应该为应用程序设置一个static文件夹，然后将文件放入其中。 之后，您可以设置提供静态文件 ，然后开始使用相对的网址，例如/images/abc.png 。

这样一来，您就不必使用require来获取它们，而只需将字符串用作相对URL，服务器将负责其余的工作。

Answer 4

图像源在js代码生效之前已解决。 您必须静态写入图像位置。

function icon() {
    return require('../images/a.png');
}
in jsx -
<Image source={icon()} />