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 的 标签指定了用于解析静态文件（如图片、脚本和样式表）相对地址的基地址。在开发期间，你通常会在存有 index.html 的目录下启动开发服务器。 那就是根目录，你要在 index.html 的顶部附近添加 ，因为 / 就是该应用的根路径。但是在共享或生产服务器上，你可能会在子目录下启动服务器。 比如，当前应用的加载地址可能类似于 http://www.mysite.com/my/app/，这里的子目录就是 my/app/。所以你就要往服务端版本的 index.html 中添加 。

而我的生产服务器应用的加载地址刚好不是根目录，于是修改为（我的部署目录），之后又尝试了，，，无一成功

然后有开始修改html文件内容，例如src='./pic.png'修改为src='/pic.png'，还是不行。偶然间发现和src='pic.png'，也就是一个'/'也不加的组合可以显示图片。为保持风格一致，我把CSS文件的background-image:url('./pic.png')也做相应修改，但是编译时报错了，提示angular中css的url不能有绝对路径，只能使用相对路径

所以html使用不带'/'的绝对路径，CSS使用相对路径是可以部署成功的，但至于为什么我就不是很清楚，现在暂且理解为angular规定。还有对于官方文档的这一段内容

另一种发布 Angular 应用的简单途径是使用 GitHub Pages。

1. 你需要创建一个 GitHub 账号（如果没有的话），然后为你的项目创建一个仓库。记下 GitHub 中的用户名和项目名。

2. 使用 Angular CLI 命令 ng build 来构建这个 GitHub 项目，选项如下：
   ng build --prod --output-path docs --base-href //

实践得出--base-ref //是不行的，必须把base ref 设置为空。所以我也不知道使用base ref的意义是什么。

分别提交到云虚拟主机和git pages之后，发现前者有些图片无法显示，而git pages可以完全显示。检查后发现是资源文件名是中文的问题，git pages可以解析中文路径名，而云主机不可以。换成英文后变为正常。

总结

1. Angular中，html中的路径要写成开头不带/的绝对路径。比如

2.Angular中，CSS中的路径要写成相对路径，比如

background-image: url('../../assets/hhh.png');

 3.Angular项目ng build编译后的index.html中的base ref要设置为空，即

至于为什么，我也不太清楚，如果有大神明白，欢迎告诉我