带有 javascript 的 img 标签的动态 src

Question

我有一个反应应用程序，它从一些提供程序服务器和货币变量中的setState获取加密API并将它们显示在表格中。 我下载每个加密货币图标并创建一个 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"]}'}