angular 图片路径 静态资源加载 问题

今天因为这个问题头疼了整整一天。不得不说angular还有很大的优化空间。

一般打包发布项目，只需要运行命令

ng build --prod --output-path docs --base-href 

然后把docs目录下的内容复制到服务器下即可。

还可以发布到Git Pages，是github提供的页面服务，相当于呈现repository里的页面。这也是angular官方推荐的两种发布方式。

对于以前的项目，ng build之后点击本地的index.html是可以打开的，效果和放在服务器上相同。

今天想发布的项目有很多图片，加载图片有两种方式，一是在html中设置src='./pic.png'，一种在css中设置background-image:url('./pic.png')。在本地使用ng serve命令运行时非常正常，但是ng build以后，不论是本地还是服务器上还是Git Pages都无法显示图片。

 

查阅angular文档有这样一段话

HTML 的 <base href="..."/> 标签指定了用于解析静态文件（如图片、脚本和样式表）相对地址的基地址。在开发期间，你通常会在存有 index.html 的目录下启动开发服务器