帶有 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"]}'}