React/JS - Dynamically render image

Question

I'm trying to use this set of icons here in my dynamic table component. My current hack was to drag the entire folder from npm_modules into my current directory... this probably isn't good practice, is there a better way to approach this?

but I've got so far, now I'm stuck with this error:

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

It's because there might not be an icon for a few of the assets in my table. If that's the case, I'm trying to use the generic icon instead.

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>
          ),
        },
      ],
    }))
  }
}

How close am I?

When I do:

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

It shows the generic icon for them all.

there's just no cro.png in github.com/spothq/cryptocurrency-icons/tree/master/32/color — Maximilian Haindl
– Maximilian Haindl, Commented Aug 5, 2020 at 23:16
@kinoth for the missing icons im trying to use the generic icon — shineonbro
– shineonbro, Commented Aug 5, 2020 at 23:18
There's an error in your logic. Otherwise the error message wont be Cannot find module './cro.png'. Require is definately looking for cro.png (because coin.symbol === true) which can't be found as its not there — Maximilian Haindl
– Maximilian Haindl, Commented Aug 5, 2020 at 23:28

Maximilian Haindl · Accepted Answer · 2020-08-06 01:29:59Z

As GEAfan said, remove require() - static assets are usually served from /public/ folder.

So, I'd create a folder like /public/assets/ and copy all folders from ./node_modules/cryptocurrency-icons/ to /public/assets/images/ folder. Since then you are able to pass a string to src proptery.

Also template literal syntax e.g. using backticks rather then concatinating strings, makes your code more readable

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

Since coin.symbol is always true you will have to dynamically import assets to test if they are actually there, so that you are able to set the generic icon.

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>,
      },
    ],
  };
});

ah, had to fix the filename, still doesn't show the generic icons though! i.imgur.com/V7pEG67.png
.. probably /assets/images/32/color/${coin.symbol ? coin.symbol + '@2x' : 'generic'}.png
well... your coin.symbol is always true, so 'generic' is never gonna get placed. Just look at an image tag in your DOM. I guess OKB is something like src='/assets/images/black/[email protected]'. So you still need some logic to guarantee coin.symbol can be false.

GAEfan · Accepted Answer · 2020-08-05 23:20:00Z

0

This is not what you want:

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

You want:

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

answered Aug 5, 2020 at 23:20

GAEfan

11.4k2 gold badges20 silver badges34 bronze badges

6 Comments

shineonbro Over a year ago

that throws me the error: Cannot find module './cro.png'!

GAEfan Over a year ago

Are you using webpack? If not, delete the require()

shineonbro Over a year ago

i.imgur.com/HoBxyjq.png lol i need to fix the logic somehow

GAEfan Over a year ago

Remove those () wrapping the string

shineonbro Over a year ago

I know I'm getting cloooser i.imgur.com/dVQghWS.png

|

Collectives™ on Stack Overflow

React/JS - Dynamically render image

2 Answers 2

6 Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Related