React:试图从对象属性中请求图像中的src

Question

我正试图创建一个纸牌游戏，所以我下载了52个jpegs的纸牌，并将它们放在src文件夹中一个名为JPEG的文件夹中。我制作了一系列卡片，看起来像这样：

const cards = [{
name: 'aceHearts',
value: 1,
img: './JPEG/AH.jpg'
}, {
name: 'aceDiamonds',
value: 1, 
img: './JPEG/AD.jpg'
}

等等。

我试着让它在点击一个按钮时，图像会变成洗牌阵列顶部的任何卡片，就像一样

<img src={cards[0].img} />

我试着在中导入图像，这很有效，但在我的代码顶部有52个导入似乎很傻。所以我试着写：

<img src={require('./JPEG/AH.jpg') />

这是有效的，卡片显示出来。但当我写时

<img src={require(cards[0].img)} /> 

它告诉我"；错误：找不到模块"/JPEG/AH.jpg’"；我不明白，因为当我手动键入它时，它发现它很好，但当它从数组中提取它时却找不到它？有什么方法可以做到这一点吗？或者我应该使用一种完全不同的方法吗？

如果相关的话，cards数组位于src文件夹中一个名为cards.js的文件中，JSX位于同样位于src文件夹的App.js文件中。我已经将卡导入应用程序，它似乎可以很好地访问它。

Answer 1

您只需添加"quot；顶部的空字符串类似于：

<img src={require(""+cards[0].img)} />