反应：尝试从对象属性中要求图像src

问题描述

我正在尝试制作纸牌游戏，因此我下载了52张jpeg的纸牌，并将它们放在src文件夹中的JPEG文件夹中。 我做了一系列卡片，看起来像这样：

ScreenSnip

等

我试图做到这一点，以便在单击按钮时，图像将更改为随机排列的阵列顶部的任何卡片，就像

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

我尝试在中导入图像，并且可以正常工作，但是对我来说，在代码顶部进行52项导入似乎很愚蠢。所以我试着写：

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

，并且有效，显示卡。但是当我写

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

它告诉我“错误：找不到模块'./JPEG/AH.jpg'”，我不理解，因为在手动键入时可以很好地找到它，但是在手动键入时却找不到它。从数组中拉出来？有什么方法可以使这项工作奏效，还是我应该使用一种完全不同的方法？

如果相关，则将cards数组放在src文件夹中的Cards.js文件中，并将JSX放在src文件夹中的App.js文件中。我已将卡导入到App中，并且似乎可以正常访问它。

解决方法

您可以在顶部添加“”空字符串，例如：

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