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&nbsp; alt="icon"&nbsp; style={{ width: 28, height: 28 }}&nbsp; src={`/assets/images/32/color/${coin.symbol ? coin.symbol : "generic"}.png`}/>由于coin.symbol始终为真，您将必须动态导入资产以测试它们是否确实存在，以便您能够设置通用图标。var rows = coins.map((coin: any) => {&nbsp; &nbsp; let hasFile: Boolean;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; import(`your/path/to/${coin.symbol}.png`).then(() => hasFile = true).catch(() => hasFile = false)&nbsp; &nbsp;&nbsp;&nbsp; return {&nbsp; &nbsp; cells: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; key: "icon",&nbsp; &nbsp; &nbsp; &nbsp; content: (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style={{ display: "flex", alignItems: "center" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style={{ marginRight: 8 }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt='icon'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: "32px", height: "32px" }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={`/assets/images/black/${hasFile ? coin.symbol + "@2x" : "generic"}.png`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; key: "name",&nbsp; &nbsp; &nbsp; &nbsp; content: (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style={{ display: "flex", alignItems: "center" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {coin.name}{" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style={{ fontSize: 10, paddingLeft: 5 }}>[{coin.symbol.toUpperCase()}]</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; key: "price",&nbsp; &nbsp; &nbsp; &nbsp; content: <p>${coin.current_price}</p>,&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; key: "mcap",&nbsp; &nbsp; &nbsp; &nbsp; content: <p>{coin.market_cap}</p>,&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; key: "vol",&nbsp; &nbsp; &nbsp; &nbsp; content: <p>{coin.total_volume}</p>,&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; key: "last24",&nbsp; &nbsp; &nbsp; &nbsp; content: <p>+{coin.price_change_24h}</p>,&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; key: "action",&nbsp; &nbsp; &nbsp; &nbsp; content: <Button>...</Button>,&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ],&nbsp; };});

Answer 2

这不是你想要的：(!coin.symbol&nbsp;?&nbsp;coin.symbol&nbsp;:&nbsp;"generic")你要：(coin.symbol&nbsp;?&nbsp;coin.symbol&nbsp;:&nbsp;"generic")