生产部署之后Angular7的assets目录文件引用url错误的解决方法

某些页面需要放置一些静态图片，按照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