Angular项目中SVG图片无法加载问题求助

嘿，我完全懂你碰到的这个麻烦——Angular对静态资源的处理逻辑和咱们常规的文件相对路径思路不太一样，这才导致了404错误。咱们来拆解下问题，再给你两个靠谱的解决方案：

为什么会出现404？ #

你用../images/shared/logo.svg这种相对路径时，浏览器实际会去请求http://localhost:4200/images/shared/logo.svg，但你的images文件夹是放在src目录下的。默认情况下，Angular只会把src/assets目录当成静态资源目录来处理，其他目录的资源不会被自动复制到编译后的输出目录里，自然就找不到啦。

解决方案1：把图片移到默认静态资源目录 #

Angular默认配置了src/assets作为静态资源文件夹，你可以直接把images文件夹移到src/assets下面，这样路径就改成：

<img src="assets/images/shared/logo.svg" alt="网站Logo">

修改完后刷新页面，图片应该就能正常加载了，这个方法最简单直接，也是Angular官方推荐的做法。

解决方案2：修改Angular配置，添加自定义静态资源目录 #

如果你不想移动images文件夹，那可以修改angular.json文件来告诉Angular要把src/images当成静态资源目录：

1. 打开项目根目录下的angular.json
2. 找到projects -> 你的项目名称 -> architect -> build -> options -> assets数组
3. 在数组里添加一行"src/images"，修改后大概是这样：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/images"
   ]
   

4. 重启npm start（必须重启才能让配置生效）
5. 之后在模板里就可以用根相对路径引用图片了：

   <img src="/images/shared/logo.svg" alt="网站Logo">
   

这样处理后，Angular在构建和开发时就会把src/images里的资源复制到输出目录，浏览器就能正确找到图片啦。

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