Javascript React/JS-动态渲染图像

我正在尝试在我的动态表组件中使用。我目前的做法是将整个文件夹从

npm_modules

拖到我当前的目录中。。。这可能不是一个好的做法，有没有更好的方法

但到目前为止，我一直在犯这个错误：

Unhandled Rejection (Error): Cannot find module './cro.png'
> 104 |     src={require('./cryptocurrency-icons/32/color/'+ (coin.symbol ? coin.symbol : "generic") + '.png')}

这是因为我的表中的一些资产可能没有图标。如果是这样的话，我会尝试使用通用图标

if（（typeof datalol！=“未定义”）
&&datalol！==null）{
const coins=datalol.getCoins.assets；
for（设i=0，l=coins.length；i({
单元格：[
{
键：'图标'，
内容：(
),
},
{
关键字：“名称”，
内容：(
{coin.name}
[{coin.symbol.toUpperCase（）}]
),
},
],
}))
}
}

我离这里有多近

当我这样做时：

src={require('./cryptocurrency-icons/32/color/'+ (!coin.symbol ? coin.symbol : "generic") + '.png')}

---

它显示了它们的通用图标。

这不是您想要的：

(!coin.symbol ? coin.symbol : "generic")

你想要：

(coin.symbol ? coin.symbol : "generic")

---

正如GEAfan所说，删除

require（）

——静态资产通常从

/public/

文件夹中提供

因此，我将创建一个类似于

/public/assets/

的文件夹，并将所有文件夹从

/node\u modules/cryptocurrency icons/

复制到

/public/assets/images/

文件夹。此后，您可以将字符串传递给

src

proptery

此外，模板文字语法（例如使用反勾号而不是包含字符串）使代码更具可读性

。。。

由于

coin.symbol

始终为真，因此您必须动态导入资产以测试它们是否实际存在，以便您能够设置通用图标

var rows=coins.map（（coin:any）=>{
让hasFile:Boolean；
导入（`your/path/to/${coin.symbol}.png`）。然后（（）=>hasFile=true）。捕获（（）=>hasFile=false）
返回{
单元格：[
{
键：“图标”，
内容：(
),
},
{
键：“名称”，
内容：(
{coin.name}{”“}
[{coin.symbol.toUpperCase（）}]
),
},
{
键：“价格”，
内容：${coin.current_price}
,，
},
{
键：“mcap”，
内容：{coin.market\u cap}
,，
},
{
键：“vol”，
内容：{coin.total_volume}
,，
},
{
键：“last24”，
内容：+{coin.price\u change\u 24h}
,，
},
{
关键：“行动”，
内容：。。。，
},
],
};
});

在@kinoth中没有cro.png来显示丢失的图标，我正在尝试使用通用图标。您的逻辑中有一个错误。否则错误消息将不会是

找不到模块'/cro.png'

。Require正在查找cro.png（因为

coin.symbol==true

），但找不到它，因为它不在那里，这会引发错误：找不到模块“./cro.png”！你在用网页包吗？如果没有，请删除

require（）

lol我需要修复逻辑，以某种方式删除那些

（）

包装字符串我知道我正在使用cloooser，但它仍然出现故障！你的文件夹结构是什么？啊，必须修复文件名，但仍然没有显示通用图标。。可能

/assets/images/32/color/${coin.symbol？coin.symbol+'@2x'：'generic'}.png

好吧。。。你的

硬币.symbol

总是正确的，所以

'generic'

永远不会被放置。只需查看DOM中的图像标记。我猜OKB类似于

src='/assets/images/black/okb@2x.png“

。所以你仍然需要一些逻辑来保证

硬币。符号可以是假的。