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

尝试这种方式

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 stack一样，尽管它们的核心要点仍然不正确。

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

您应该为应用程序设置一个static文件夹，然后将文件放入其中。之后，您可以setup serving static files，然后开始使用诸如/images/abc.png之类的相对URL。

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

Answer 4

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

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

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

4 个答案: