css - 在元素中使用本 map 标 svg

Question

我正在尝试使用 css 在屏幕上呈现 SVG。这是我的文件结构。 Root > Assets > Icon > user-icon.svg。所以，我正在尝试使用 CSS 来添加它:

.user-element {
  background-image: url(/assets/icons/user-icon.svg);
}

但是屏幕上没有显示任何内容，我在控制台中收到此错误:

获取 http://localhost:4000/assets/icons/user-icon.svg 404(未找到)

我不是在尝试发出网络请求。更多只是试图在我的本地文件系统中找到 SVG。任何帮助都将非常感谢!

Answer 1

在 url 前面放这个:./ 并将路径放在引号 ('') 中，如下所示:

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

如果还是不行那就说明路径不对

但正如我在你的问题中看到的那样，你说图标在 assets/icon/user-icon.svg 中，但在 css 代码中你使用的是 assets/icons/user -icon.svg 所以路径是错误的。尝试使用下面的代码:

.user-element {
  background-image: url(./assets/icon/user-icon.svg);
}