如何解决反应:尝试从对象属性中要求图像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)} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。