React/JS -动态渲染图像

Question

我正尝试在我的动态表组件中使用this set of icons here。我的当前技巧是将整个文件夹从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 !== "undefined") 
&& datalol !== null) {
  const coins = datalol.getCoins.assets;

  for(let i = 0, l = coins.length; i < l; i++) {
    var rows = coins.map((coin: any) => ({
      cells: [
        {
          key: 'icon',
          content: (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ marginRight: 8 }}>
              <img
                alt="icon"
                style={{ width: 28, height: 28 }}
                src={require('./cryptocurrency-icons/32/color/'+ (coin.symbol ? coin.symbol : "generic") + '.png')}
              />
              </div>
            </span>
          ),
        },
        {
          key: 'name',
          content: (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              {coin.name} <p style={{fontSize: 10, paddingLeft: 5}}>[{coin.symbol.toUpperCase()}]</p>
            </span>
          ),
        },
      ],
    }))
  }
}

我离这有多近？

当我这样做的时候：

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

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

Answer 1

正如GEAfan所说，remove require() - static资产通常从/public/文件夹中提供。

因此，我会创建一个类似/public/assets/的文件夹，并将./node_modules/cryptocurrency-icons/中的所有文件夹复制到/public/assets/images/文件夹中。从那时起，您就可以将字符串传递给src代理了。

此外，模板文字语法(例如，使用反引号而不是连接字符串)使代码更具可读性

...
<img
  alt="icon"
  style={{ width: 28, height: 28 }}
  src={`/assets/images/32/color/${coin.symbol ? coin.symbol : "generic"}.png`}
/>

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

var rows = coins.map((coin: any) => {
    let hasFile: Boolean;
    
    import(`your/path/to/${coin.symbol}.png`).then(() => hasFile = true).catch(() => hasFile = false)
    
  return {
    cells: [
      {
        key: "icon",
        content: (
          <span style={{ display: "flex", alignItems: "center" }}>
            <div style={{ marginRight: 8 }}>
              <img
                alt='icon'
                style={{ width: "32px", height: "32px" }}
                src={`/assets/images/black/${hasFile ? coin.symbol + "@2x" : "generic"}.png`}
              />
            </div>
          </span>
        ),
      },
      {
        key: "name",
        content: (
          <span style={{ display: "flex", alignItems: "center" }}>
            {coin.name}{" "}
            <p style={{ fontSize: 10, paddingLeft: 5 }}>[{coin.symbol.toUpperCase()}]</p>
          </span>
        ),
      },
      {
        key: "price",
        content: <p>${coin.current_price}</p>,
      },
      {
        key: "mcap",
        content: <p>{coin.market_cap}</p>,
      },
      {
        key: "vol",
        content: <p>{coin.total_volume}</p>,
      },
      {
        key: "last24",
        content: <p>+{coin.price_change_24h}</p>,
      },
      {
        key: "action",
        content: <Button>...</Button>,
      },
    ],
  };
});

Answer 2

这不是你想要的：

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

您需要：

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