脚本宝典收集整理的这篇文章主要介绍了

生产部署之后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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过