带有 javascript 的 img 标签的动态 src

Question

I have a react-app that gets crypto API from some Provider Server and setState in currency variable and shows them in a table. I download each cryptocurrency icon and create a JSON file (cryptoIconSrc) to set img tag src dynamically. icons are SVG. but they don't display on my table.

here I set a condition to find the related icon from the JSON file

currency.map((item) => {
                    let mapItem = item;
                    const temp = cryptoIconSrc.filter((item) => {
                      return item["symbol"] === mapItem["baseAsset"];
                    });

and here I set that related icon to img src

                    <img
                    src={`${temp[0]["src"]}`}
                    width="20px"
                    height="20px"
                    />

but they don't display

I use require("./someDirectory/icon.png") in other sections of my app but in this case require(`${temp[0]["src"]}`) doesn't work and issue an error: module... not found

Answer 1

  <img
    src={`${temp[0]["src"]}`}
    key={`${temp[0]["src"]}`}
    width="20px"
    height="20px"
   />

Adding a key prop will do the trick.

Answer 2

It seems like you are using back ticks in your code. That almost never works, try using single quotes. So not:

src={`${temp[0]["src"]}`}

But:

src={'${temp[0]["src"]}'}