如何在reactjs中映射图像

IT技术 reactjs jsx react-class-based-component
2021-05-05 02:58:23

因此，在 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 中复制图像链接之一，则它可以工作。请帮助。

2个回答

您可以使用适当的表达式动态地要求：

更改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 可以理解这个表达式，通过生成关于 directory 和 extension 的上下文，并且可以加载所有匹配的module。

我认为你缺少需要。

喜欢：

<img src={require(item.image)} />
其它你可能感兴趣的问题
上一篇如何根据位置在react中更改标题背景颜色 下一篇子目录中的 Webpack-dev-server - 不编译和不热重载