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

本文固定链接: http://www.js-code.com/angularjs/angularjs_28342.html