React / JS - динамически визуализировать изображение

Question

Я пытаюсь использовать этот набор иконок здесь в моем компоненте таблицы Dynami c. Мой текущий взлом заключался в том, чтобы перетащить всю папку из npm_modules в мой текущий каталог ... это, вероятно, не очень хорошая практика, есть ли лучший способ подойти к этому?

но у меня пока есть , теперь я застрял с этой ошибкой:

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

Это потому, что в моей таблице может не быть значка для некоторых ресурсов. В этом случае я пытаюсь использовать вместо него значок generi c.

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')}

Отображается общий значок c для всех.

Answer 1

Как сказал GEAfan, удалить require() - ресурсы stati c обычно обслуживаются из папки /public/.

Итак, я бы создал папку типа /public/assets/ и скопировал все папки из ./node_modules/cryptocurrency-icons/ в папку /public/assets/images/. С тех пор вы можете передавать строку в src proptery.

Также синтаксис литерала шаблона, например, использование обратных кавычек вместо объединения строк, делает ваш код более читаемым

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

Поскольку coin.symbol всегда верно, вам придется динамически импортировать активы, чтобы проверить, действительно ли они существуют, чтобы вы могли установить общий значок c.

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")