共计 690 个字符，预计需要花费 2 分钟才能阅读完成。
某些页面需要放置一些静态图片，按照 Angular 目录结构，应该放到 /src/assets 目录下，例如有文件 /src/assets/img/menu_a.svg，在页面的 html 模板中这样引用
<img src=”/assets/img/menu_a.svg” alt=””>
在本地测试 (ng serve -o) 中，在 http://localhost:4200 上可以正常显示图片。
但前端项目和后台整体打包部署到 Tomcat 后，发现图片不能正常显示。查看发现图片的链接为 http://192.168.0.23:8085/assets/img/menu_a.svg，而 Angular 前端被放在路径 http://192.168.0.23:8085/fr/ 上。图片路径应该是
http://192.168.0.23:8085/fr/assets/img/menu_a.svg
解决方法：
1. 前端构建时设置参数 –baseHref
ng build –prod –outputHashing=all –outputPath=../public/dist –baseHref=/fr/ –build-optimizer
–baseHref 会使 ng 创建 index.html 的时候，添加上 base 标签
<base href=”/fr/”>
因为 Angular 是单页模式，所以所有页面和组件都放置在 index.html 内，使用相同的基础路径。
2. 把 assets 目录下的文件的 url 改为./assets，如
<img src=”./assets/img/menu_a.svg” alt=””>
这样就可以正确显示图片。
发布于 13:10
