Reactjs React Images赢得'；当我通过数组传递src值时不会加载

因此，当我使用

src={require（'images/img-1'）}

但是，我试图通过一个数据组件传入src，因此代码如下所示

export const CardData = [
{
src: '../images/img-2.jpg',
text: 'Travel',
},

{ CardData.map((item, index) =>
  <img
     src={item.src} 
  />
}

import MyImg from '../images/img-2.jpg';

// use MyImg allias for using that image
export const CardData = [
{
  src: MyImg,
  text: 'Travel',
},

然后我映射我的代码并使用

{CardData.map((item, index) => {
  <img
 src={item.src} />

{CardData.map（（项目，索引）=>{

但这不起作用，因为我不能在其中添加require。我如何编写相同的代码，但包含require

---

我尝试了

src={require{item.src}}

，但对我不起作用

首先，你应该像这样映射数组

export const CardData = [
{
src: '../images/img-2.jpg',
text: 'Travel',
},

{ CardData.map((item, index) =>
  <img
     src={item.src} 
  />
}

import MyImg from '../images/img-2.jpg';

// use MyImg allias for using that image
export const CardData = [
{
  src: MyImg,
  text: 'Travel',
},

---

为什么你把你的需求放在

src={}

而不是顶层？好奇地想知道是否有一些我不知道的优势（完全可能）-如果没有，那么我会说你不应该这样做，就个人而言，这似乎最终可能会影响性能。除此之外，你是否尝试过使用与require？

images/img-2

完全相同的路径，而不是添加

。/

？如果这不起作用，请评估你的统计数据c文件已交付，或者检查您在代码中引用的文件结构。如果我确实需要（../images/img-1），图像可以正常加载但是，每当我将图像src传输到数据文件并通过数组传递它时，我都不知道如何正确实现require。我该如何将其添加到顶层？您传递给调用该数据的组件的路径是否正确？是的，其他所有内容都适用于我的其他属性，如文本、描述等。但唯一不正确的是在映像中工作。在我创建数组之前它也没有加载，因此它与我的数组代码无关，它从项目开始直到我添加require（）时才加载我认为最终，你必须看看静态文件/图像是如何被提供的——最有可能是在你的服务器中，如果你有一个js文件的话。如果设置正确，那么你应该能够使用

images/img

（假设你这样设置的话）从应用程序的任何地方提供图像组件的文件结构是什么并不重要。总的来说，您还没有提供调试此组件所需的代码…请提供您的文件结构和任何处理交付资产的代码；）