在项目中使用本地SVG图标：CSS引入404问题求助

嘿，我来帮你搞定这个SVG图标不显示的问题！咱们一步步来排查和解决：

1. 先修正文件路径的匹配问题 #

你遇到404的核心原因大概率是路径拼写/大小写不匹配：

• 你的项目结构是 Root > Assets > Icon > user-icon.svg
• 但CSS里写的是 /assets/icons/user-icon.svg

注意这两个关键差异：

• 目录名是 Icon（单数），但CSS里写的是 icons（复数）
• 像Linux/macOS这类系统会区分文件名大小写，Assets 和 assets 会被视为完全不同的路径

修正后的CSS路径应该是：

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

（如果你的目录确实是首字母大写的 Icon，就改成 /assets/Icon/user-icon.svg）

2. 完全避免网络请求：将SVG内联到CSS中 #

如果不想发起任何网络请求，最直接的方式是把SVG代码转成Data URI内嵌到CSS里，这样图标会直接打包在CSS文件中，无需加载外部资源：

操作步骤很简单：

1. 打开 user-icon.svg 文件，复制里面的全部代码（从 <svg 到 </svg> 的所有内容）
2. 把代码直接放到CSS的 url() 里，加上 data:image/svg+xml;utf8, 前缀即可

示例代码：

.user-element {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/></svg>");
}

这种方式完全不会触发网络请求，而且兼容性拉满。

3. 本地打开HTML文件时用相对路径 #

如果你是直接在本地打开HTML文件（没有通过开发服务器），绝对路径 /assets/... 会指向系统根目录，这时候要改用相对路径：

• 如果你的HTML文件在 Root 目录下，路径写成 ./assets/icon/user-icon.svg
• 如果你的CSS文件在 Root/css 目录下，路径写成 ../assets/icon/user-icon.svg

这样浏览器会直接从本地文件系统读取SVG，不会发起网络请求。

内容的提问来源于stack exchange，提问作者Bitwise