如何根据反应中的数组数据动态显示/调用图标

Question

问题：1（已解决！）

如何根据数组数据代码调用/显示图标？

data = [{
 img: '01d'
}, {
 img: '02d'
}]

data && data.map((item) => (
      <img src={`./icons/${item['img']}.svg`} />
))

我在这里尝试做的是根据img code动态显示图标。

问题 2添加require()后，如何修复You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Answer 1

你的错误在这里：

data && data.map((item) => (
      <img src={`./icons/${data['img']}.svg`} />    // Error: data['img']
))

解释：数据是一个对象数组。 要访问第一个元素，您需要使用data[0]['img'].

但由于您已经创建了 map，您可以使用该item访问 object。 所以你现在可以使用item['img']代替。

data && data.map((item) => (
      <img src={`./icons/${item['img']}.svg`} />.      // replace data by item as it contains the object on every iteration
))

更新：根据您的 404 错误评论，

您提供的路径不正确。 试试这个：假设你的路径是： ProjectFolder/src/icons/01d.svg

<img alt="" src={getImg(imgName)} />

function getImg(imgName) {
    var fullPath = "icons/" + imgName + ".svg";
    return require(fullPath);
}

如果它仍然不起作用，我建议您尝试使用 static img 并查看它是否加载。 并尝试找出路径问题 <img alt="" src={require('icons/01d.svg')} />

Answer 2

当你遍历一个数组时，你在每个循环周期中都有一个 object，所以你可以这样做

data = [{
 img: '01d'
}, {
 img: '02d'
}]

data && data.map((item) => (
      <img src={`./icons/${item.img}.svg`} />
))