無法在 React.js 上從 svg 加載圖像

Question

問題

我正在努力從 React 上的 svg（可縮放矢量圖形）文件加載圖像。 我嘗試了幾種解決方法，但沒有收到任何結果。 這些是已經嘗試過的解決方案：

解決方案 - 1

<img src="../../assets/icons/branch.svg" alt="branch" />

首先，我看了很多文章，看到的是：Directly set source to svg。但是沒有用。

解決方案 - 2

<i className="branch">:</i>

.branch {
  background-image: url('../../assets/icons/branch.svg');
}

其次，我嘗試使用背景圖像，但沒有用。

解決方案 - 3

<object type="image/svg+xml" data="../../assets/icons/branch.svg" aria-label="branch">
  Image
</object>

第三，我嘗試使用 object，但沒有用。

解決方案 4

當我嘗試用作在線 svg 時，它可以工作。 但我不喜歡它，我想將 svg 用作外部。

最后

我嘗試了這些方法，但只有在線方法有效。 有人可以幫助我將 svg 用作外部電話嗎？

Answer 1

你也可以試試這個

import { ReactComponent as Branch } from "../../assets/icons/branch.svg";

然后像這樣使用它

<Branch/>

或者

import Branch from "../../assets/icons/branch.svg";

background-image: url(${Branch});