所以在 Reactjs 类组件中,我的状态中有一个数组,如下所示:
myArray: [
{ number: 1, title: 'Users', image: '../../../assets/images/website/homepage/users.png' },
{ number: 2, title: 'Clients', image: '../../../assets/images/website/homepage/clients.png' },
{ number: 3, title: 'Admin', image: '../../../assets/images/website/homepage/admins.png' },
]
我这样映射数组:
{this.state.myArray.map((item, index) => (
<Box key={index} className="col-sm-12">
<img src={ item.image } className="img-fluid" alt={item.title} />
<Typography variant="h4">{item.number}</Typography>
</Box>
))}
现在,一切正常,除了不显示的图像,我真的不明白我哪里弄错了。
请注意,如果我使用 require 方法直接在 src 中复制其中一个图像链接,它就可以工作。请帮忙。
最佳答案
您可以require dynamically with proper expression :
将 image
更改为(删除 ../../../assets/images/website/homepage/
和 .png
):
const myArray = [
{
number: 1,
title: 'Users',
image: 'users',
},
{
number: 2,
title: 'Clients',
image: 'clients',
},
{
number: 3,
title: 'Admin',
image: 'admins',
},
]
并在 UI 上呈现(添加 目录路径 和 require
中的扩展名):
{myArray.map((item, index) => (
<Box key={index} className="col-sm-12">
<img
src={require('../../../assets/images/website/homepage/' +
item.image +
'.png')}
className="img-fluid"
alt={item.title}
/>
<Typography variant="h4">{item.number}</Typography>
</Box>
))}
为什么有效?:
Webpack可以理解这个表达式,通过generating context about directory and extension , 并且可以加载所有匹配的模块。
关于reactjs - 如何在reactjs中映射图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62110521/