Angular v12组件库img[src]引用assets图片失效有什么解决方案？

问题原因 #

Angular 库项目和普通项目的资源处理逻辑不同：

• 普通项目打包时会直接处理模板内的静态资源路径，直接映射到项目自身的assets目录
• 库项目的ng-packagr默认不会处理模板内写死的静态src路径，且库的assets最终会被打包到node_modules下，需要消费项目额外配置才能映射到运行时的正确路径
• 背景图能正常加载是因为ng-packagr处理样式文件时会自动转换url()内的资源路径，和模板内的静态路径处理逻辑不同

可行解决方案 #

方案1：调整库配置+消费项目同步导入assets #

首先修正你当前ng-package.json的配置错误，所有assets路径需要改为相对于配置文件的相对路径，去掉开头的/：

"assets": [
  "./assets/**/*",
  "./styles.scss",
  "./styles/**/*.scss"
]

之后要求所有使用该库的项目，在自身angular.json的projects.项目名.architect.build.options.assets数组中新增如下配置，将库的assets资源拷贝到自身的运行时assets目录：

{
  "glob": "**/*",
  "input": "node_modules/替换为你的库包名/assets",
  "output": "/assets/"
}

配置完成后你原来的<img src="/assets/img/foo.jpg">代码可以直接正常运行。

方案2：组件内导入图片绑定src（无需修改消费项目配置） #

不需要修改任何全局配置，直接在组件的ts文件中导入对应的图片资源，再绑定到模板的src属性即可：

1. 组件ts代码：

// 路径替换为你的图片相对于当前ts文件的相对路径
import fooImg from '../assets/img/foo.jpg';

@Component({
  // 你的组件配置
})
export class 你的组件名 {
  public fooImg = fooImg;
}

2. 模板代码：

<img [src]="fooImg">

该方案下ng-packagr会自动处理图片路径，小体积图片会自动转base64，大体积图片会生成带hash的独立资源文件，自动适配消费项目的部署路径。

方案3：动态拼接baseHref适配子路径部署 #

如果你的消费项目可能部署在域名子路径下，/assets开头的绝对路径会失效，可以注入APP_BASE_HREF动态拼接图片路径：

1. 组件ts代码：

import { APP_BASE_HREF } from '@angular/common';
import { Component, Inject } from '@angular/core';

@Component({
  // 你的组件配置
})
export class 你的组件名 {
  public imgPath: string;

  constructor(@Inject(APP_BASE_HREF) private baseHref: string) {
    this.imgPath = `${this.baseHref}assets/img/foo.jpg`;
  }
}

2. 模板代码：

<img [src]="imgPath">

该方案需要配合方案1的消费项目assets拷贝配置使用。

内容的提问来源于stack exchange，提问作者Piosek