React/JS - 动态渲染图像

Question

我正在尝试在我的动态表格组件中使用这组图标。我目前的技巧是将整个文件夹从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 所说，删除require()- 静态资产通常从/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")