angular项目assets资源路径写法详解

作者：七棵菜日期：2023-08-16 栏目：计算机分类：1 人气：363

`angular`项目的资源路径一般为`src/assets`，打包之后assets文件夹位于此项目的根目录下，明白了这个路径关系之后，就可以写出规范兼容的地址了。

用的最多的资源是图片，以图片为例，使用图片的地方有两个，模板中和样式表中，以下使用`ionic`框架为例分别说明

### 独立项目

如果项目有独立的域名，并且部署在项目根目录下，那么资源无论是在模板中还是在样式表中，都可以写绝对路径，即"/"开始的路径，表示从项目的根路径开始。这是最简单的情况。

### 多个项目

如果项目在子目录中，作为主项目的一个附加项目，那么资源路径就要写相对路径了：

#### 模板中资源路径

模板编译之后的内容在index.html中，和assets文件夹同级，因此写法是"./assets"

```
&lt;ion-img class="animated title1 flipInY delay-1s" src="./assets/opening/default/title1.png"&gt;&lt;/ion-img&gt;
```

#### 样式表中资源路径

样式表编译之后的内容也是在index.html中，但是编译器在编译的时候会检查样式表语法，同时会检查图片是否存在，所以如果也写成'./assets'编译器在编译的时候找不到图片，编译失败，有三种办法解决此问题

##### 资源文件相对路径

图片路径使用从样式表文件开始的绝对路径，例如'../../../assets'，具体因项目的结构而异。

> 这种写法在调试，编译的时候都可以正常显示图片，部署之后也没有问题。不够优雅的地方是编译器把资源地址改变了，将资源重命名之后拷贝到了项目根目录下。此时在assets文件夹和项目根目录下有两份重复的图片。

##### 配置根路径

配置方式如下：

- 样式表中的资源路径写绝对路径，即'/assets'。

- `angular.json`配置文件中开启配置项`rebaseRootRelativeCssUrls`

```
{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "rebaseRootRelativeCssUrls": true
            ...
```

- 打包时增加配置项`base-href`，值为子目录的地址

```
ng build --base-href=/celebration/
```

这样在项目打包的时候，样式表中的url会在路径前追加根地址，部署之后图片就会正常显示。

> 这种办法也不够优雅，因为动态改变url不太规范，而且之后的版本会移除`rebaseRootRelativeCssUrls`配置项

##### 资源部署全路径

在样式表中写资源部署后的全路径了，这种做法的缺点是如果部署路径更改了，那么需要更改所有样式表中的路径。

**要采用哪一种写法，还要根据项目今后的发展而定。**

标签： angular 背景图片资源路径 assets

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：Error: EBUSY: resource busy or locked, rmdir

angular项目assets资源路径写法详解

随便看看

留言