Html SVG未显示在react中

我有一个svg文件，我想将其显示为背景img：

.图标{
背景：红色；
宽度：50%；
填充：20px；
位置：相对位置；
}
.图标：：之后{
内容：“；
位置：绝对位置；
最高：100%；
左：0；
高度：30px；
宽度：30px；
背景：url（test.svg）不重复左中心；
背景大小：150%；
}

导出默认函数App（）{
返回(
123
);
}

它只是没有显示，我有什么遗漏吗

---

呈现页面时，浏览器会获取相对于加载页面目录的其他资源（如.js/.css/.svg文件）

react工具仅向浏览器公开

public/

目录，因此当您加载

index.html

时，浏览器将尝试在同一目录中查找SVG图像

---

您可以将文件移动到

public/test.svg

或创建一个符号链接使其工作。演示-。

您可以使用以下命令直接在react中加载SVG：

从“/test.svg”导入mySvg；

之后，您可以直接在JSX代码中将其设置为背景

。。。
...

谢谢，这对我很有用。但是如果我在/public目录下添加一个子目录呢？我试过

background:url（img/test.svg）不重复左中心

和

背景：url（“/public/img/icon.svg”）不重复左中心两者都不起作用。你能分享一个你尝试过的演示的链接吗？这样我们就可以看到哪里出了问题。我认为它现在在演示中运行得很好。但是在我的项目中，我使用了scss，它总是让我玩
/src/rc/Components/SummaryCharts/SummaryCharts.scss（./node_modules/css loader/dist/cjs.js？？ref--6-oneOf-5-1！。/node_modules/postss loader/src？？postss！。/node_modules/resolve url loader？？ref--6-oneOf-5-4！。/src/rc/Components/SummaryCharts/SummaryCharts/SummaryCharts.scss）
错误。因此我想使用symlink，您能告诉我如何使用symlink使其工作吗？对于浏览器来说，它是符号链接还是文件系统上的实际文件都无关紧要。您从哪里得到此错误？在编译SASS时，还是在加载页面时在浏览器中？我在编译scss时得到此错误