如何在Angular库组件中正确配置并显示图片？

方法1：通过TypeScript导入图片资源（推荐） #

这种方式让Webpack自动处理图片路径，无需手动配置资源复制，是最可靠的方案：

1. 在test.component.ts中导入图片（路径根据库源码结构调整，比如图片在src/assets/myimage.png）：

import myImage from '../assets/myimage.png';

@Component({
  selector: 'lib-test',
  templateUrl: './test.component.html',
})
export class TestComponent {
  imageSource = myImage;
}

2. 修改组件模板，绑定到导入的图片路径：

<p>library works!</p>
<img [src]="imageSource" />

3. 确保库的angular.json中已正确配置assets，让ng-packagr打包时包含资源：

{
  "projects": {
    "my-lib": {
      "architect": {
        "build": {
          "options": {
            "assets": ["src/assets"]
          }
        }
      }
    }
  }
}

方法2：配置应用自动复制库的assets #

如果不想修改组件代码，可以让应用在构建时把库的assets复制到自己的资源目录：

1. 确保库的ng-package.json已配置assets，确保打包时assets输出到dist/my-lib/assets：

{
  "assets": ["./src/assets"]
}

2. 在示例应用的angular.json中添加资源复制规则：

{
  "projects": {
    "your-example-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/my-lib/assets",
                "output": "./assets/my-lib/"
              }
            ]
          }
        }
      }
    }
  }
}

3. 修改组件模板中的图片路径为：

<img src="assets/my-lib/myimage.png" />

方法3：使用绝对路径结合DomSanitizer #

如果需要动态处理路径，可以借助DOCUMENT和DomSanitizer生成正确URL：

1. 在test.component.ts中注入依赖并生成路径：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'lib-test',
  templateUrl: './test.component.html',
})
export class TestComponent {
  imageUrl: SafeResourceUrl;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private sanitizer: DomSanitizer
  ) {
    const baseUrl = this.document.baseURI;
    this.imageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
      `${baseUrl}assets/myimage.png`
    );
  }
}

2. 模板中绑定：

<img [src]="imageUrl" />

注：此方法需要确保应用已按方法2步骤2复制库的assets到自身目录。

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