无法从 React.js 上的 svg 加载图像

Question

问题

我正在努力从 React 上的 svg（可缩放矢量图形）文件加载图像。我尝试了几种解决方法，但没有收到任何结果。这些是已经尝试过的解决方案：

解决方案 - 1

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

首先，我看了很多文章，看到的是这样的：直接将source设置为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>

第三，我尝试使用反对但没有用。

解决方案 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});