VS Code Live Server无法正常加载SVG文件问题求助

你遇到的SVG加载失败90%是绝对路径配置错误导致的：你代码里写的src="/logo.svg"是站点根路径写法，Live Server会把你当前在VS Code中打开的工作区根目录作为站点根目录，如果你存放logo.svg的位置不在工作区最外层、或者打开工作区时选的文件夹层级不对，浏览器就找不到这个SVG文件，自然只会显示alt文本和破损图标。Codepen能正常显示是因为平台自动帮你处理了资源路径映射，和本地Live Server的路径规则不一样。

按以下顺序排查调整即可解决问题：

• 优先换成相对路径写法：如果logo.svg和你的HTML文件在同一个文件夹下，直接把img标签的src属性从/logo.svg改成./logo.svg。如果SVG存在专门的资源文件夹（比如叫assets），就写./assets/logo.svg。顺带把你底部引入的/script.js也改成相对路径./script.js，避免后续脚本也加载失败。
  改完的img标签示例：

  <img class="logo" src="./logo.svg" alt="logo">
  

• 验证文件加载状态：打开浏览器按F12调出开发者工具，切到「网络(Network)」面板，刷新页面后筛选「图像(Img)」分类，找到logo.svg的请求记录，如果状态码显示404，直接看请求的完整文件地址，对照你本地实际存放SVG的路径调整即可。
• 检查SVG文件合法性：如果路径正确、请求状态码是200还是不显示，用文本编辑器打开你从Figma导出的SVG文件，检查开头的<svg>标签有没有带xmlns="http://www.w3.org/2000/svg"属性，Figma偶尔导出会漏这个命名空间声明，浏览器会把文件当普通文本识别，不会渲染成图片，补上这个属性即可。

如果不想反复排查路径问题，可以直接把SVG文件里的全部代码复制粘贴到HTML里对应img标签的位置，不需要额外引入外部文件，不仅不会出现路径错误，还能直接用CSS调整logo的颜色、大小，比img引入灵活很多。

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