为什么Angular打包后从Spring服务器获取部分SVG报404？

1. 资源实际存放路径与引用路径错位 #

这是最常见的触发原因：

• Angular构建器的资源处理逻辑和预期目录结构不一致：当在组件模板中用跨层级相对路径（如../../assets/images/xxx.svg）引用资源时，新版Angular的esbuild/Webpack构建器会将这类资源判定为和组件绑定的构建资源，自动追加内容hash后直接输出到Angular构建产物的根目录，而非保留原有的assets/images/子目录层级。
• 如果部署到Spring静态资源目录时，这个hash后的SVG实际仍被放在static/assets/images/子目录下，HTML中生成的./some-svg-image.hash.svg对应的请求地址是域名根路径下的该文件，和实际存放路径完全错位，自然返回404。
• 能正常下载的SVG通常属于两类：一类是通过angular.json中assets配置原样拷贝的资源，构建时不会自动修改路径，部署后路径和引用完全匹配；另一类是输出位置刚好和引用路径一致的资源。

2. Spring静态资源映射规则不覆盖对应文件 #

哪怕文件确实存在于静态资源文件夹中，也可能因配置问题无法访问：

• 如果Spring配置了静态资源的访问边界，比如仅映射classpath:/static/assets/**路径下的资源，那放在static根目录下的hash SVG就不会被识别为可公开访问的资源，直接返回404。
• 如果项目配置了SPA前端路由的兜底逻辑（即非API请求统一转发到index.html），但兜底规则的优先级配置错误，就会先触发404而不是匹配对应静态文件。

3. 不同SVG的构建处理规则存在差异 #

这也是仅部分SVG无法下载的核心原因：

• angular.json中对不同SVG的配置存在差异：一部分SVG被配置为需要hash处理的构建资源，一部分被配置为原样拷贝的静态资源，两类资源的输出路径规则完全不同，如果没有根据实际输出路径调整部署逻辑，就会出现部分可访问、部分404的分化情况。
• 部分SVG如果是通过组件动态绑定（如[src]="svgPath"）的方式引用，Angular构建器不会自动修改这类动态路径的引用，这类SVG的原始路径如果和部署后的实际路径不匹配，也会单独出现404，不会影响其他静态引用的SVG。

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