Question

我尝试使用css在屏幕上渲染SVG。这是我的文件结构。 Root > Assets > Icon > user-icon.svg。所以，我试图像这样使用CSS添加它：

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

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

GET http://localhost:4000/assets/icons/user-icon.svg 404 (Not Found)

我没有尝试发出网络请求。更多只是尝试在我的本地文件系统中找到SVG。对此的任何帮助都会很棒谢谢！

Answer 1

使用这种URL，只是一个路径，浏览器将预先添加当前页面的方案，服务器和端口。要访问本地文件系统，请尝试file方案。

Answer 2

在网址前面的

放了这个：./并将路径放在引号（''）中，如下所示：

.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);
}