带有javascript的img标签的动态src

Question

我有一个 react-app，它从一些 Provider Server 和 setState 中获取加密 API 在 currency 变量中，并将它们显示在一个表格中。 我下载每个加密货币图标并创建一个 JSON 文件 (cryptoIconSrc) 以动态设置 img 标签 src。 图标是 SVG。 但它们没有显示在我的桌子上。

这里我设置了从JSON文件中查找相关图标的条件

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

在这里我将相关图标设置为 img src

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

但它们不显示

我在应用程序的其他部分使用require("./someDirectory/icon.png") 但在这种情况下require(`${temp[0]["src"]}`) 不起作用并发出错误：模块...未找到

Answer 1

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

添加一个关键道具就可以了。

Answer 2

您的代码中似乎使用了反引号。这几乎永远不会奏效，尝试使用单引号。所以不是：

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

但是：

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