在项目中使用本地 Icon svg答案

【问题标题】：Use local Icon svg in project在项目中使用本地 Icon svg
【发布时间】：2018-10-09 20:37:41
【问题描述】：

我正在尝试使用 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。对此的任何帮助都会非常感谢！

【问题讨论】：

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

【讨论】：

【解决方案2】：

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

【讨论】：