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