angular中的<base>标签与图片路径处理

html中的<base>标签

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。

浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。

这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

angular中的<base>

 <base href="..."/> 标签指定了用于解析静态文件（如图片、脚本和样式表）相对地址的基地址。

 

在开发期间，你通常会在存有 index.html 的目录下启动开发服务器。

那就是根目录，你要在 index.html 的顶部附近添加 <base href="/">，因为 / 就是该应用的根路径。

 

但是在共享或生产服务器上，你可能会在子目录下启动服务器。

比如，当前应用的加载地址可能类似于 http://www.mysite.com/my/app/，这里的子目录就是 my/app/。

所以你就要往服务端版本的 index.html 中添加 <base href="/my/app/">

 

实践：图片路径

方法1：内联css--推荐

由于 assets/ 文件夹默认在 angular.json 文件中声明，打包后会默认生成assets文件夹

<div style="background-image: url(assets/images/bg.png)"></div>

这样在开发期间和部署期间都适用，不必在构建期间再次更改路径。

 

方法2：在 html文件

<div>
  <!-- 本地相对路径 相对index.html -->
  <img src="assets/images/logo.png" />
</div>

 

方法3：使用相对路径

background: url('../../../../../assets/images/logo.png')

开发环境和生产环境都成功了，但是构建后的包会生成图片副本

 

方法4：在css文件

用/开头的

1 开发环境正常打开

2 生产环境要在部署的app同级的assets下添加logo.png，也就是更改图片路径才可以正常打开

.logo {
        background: url("/assets/images/logo.png") no-repeat center; 
}

 

无/开头的

1 开发环境报错

2 生产环境正常打开，angular可以自动补全 http://www.mysite.com/app/assets/images/logo.png

.logo {
        background: url('assets/images/logo.png') no-repeat center; 
}