Angular 17库添加图片资源失败，配置后仍无法访问求助

我正在开发Angular 17库，用于在两个项目间复用功能，避免代码复制粘贴。但遇到了一个问题——不知道怎么在库中添加可正常使用的图片资源，官方文档说明模糊，查了多篇文章也没解决。

已尝试的操作（未成功） #

1. 配置ng-package.json将assets文件夹纳入构建：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/blog-editor",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "./src/styles"
    ]
  },
  "assets": [
    {
      "glob": "**/*",
      "input": "src/assets",
      "output": "/assets/"
    }
  ]
}

2. 源文件夹结构：

src/
├── assets/
│   └── images/
│       └── default-cover.svg
├── styles/
└── public-api.ts

3. 构建后的文件夹结构：

dist/blog-editor/
├── assets/
│   └── images/
│       └── default-cover.svg
├── ...（其他库构建文件）

4. 代码中引用图片的方式：

<div style="position: relative; aspect-ratio: 16/9; border-width: 1px; border-color: rgb(203 213 225);">
  <img [ngSrc]="ctrl.value || './assets/images/default-cover.svg'" alt="cover image" style="object-fit: cover" fill priority>
</div>

报错情况 #

宿主应用运行时提示找不到./assets/images/default-cover.svg文件。

补充信息 #

• 项目基于Angular 17
• 库构建命令：ng build blog-editor --watch --configuration development
• 本地测试宿主应用命令：ng serve --project blog-editor-playground

解决方法 #

方案1：使用库包名的绝对路径引用（推荐） #

Angular库构建后，assets会被打包到npm包的根目录下。可以通过~[库包名]/assets/[图片路径]的方式引用，其中~会被Angular解析为node_modules下的对应包路径：

修改模板代码：

<div style="position: relative; aspect-ratio: 16/9; border-width: 1px; border-color: rgb(203 213 225);">
  <img [ngSrc]="ctrl.value || '~blog-editor/assets/images/default-cover.svg'" alt="cover image" style="object-fit: cover" fill priority>
</div>

注：blog-editor是你的库在package.json中定义的name字段值。

方案2：将图片转为base64嵌入代码（适合小图标） #

如果图片体积很小（比如SVG图标），可以直接将其转为base64字符串，或者在组件中导入图片文件作为资源：

组件代码：

import defaultCover from './assets/images/default-cover.svg';

@Component({
  // 组件配置
})
export class YourComponent {
  defaultCoverUrl = defaultCover;
}

模板代码：

<div style="position: relative; aspect-ratio: 16/9; border-width: 1px; border-color: rgb(203 213 225);">
  <img [ngSrc]="ctrl.value || defaultCoverUrl" alt="cover image" style="object-fit: cover" fill priority>
</div>

这种方式无需配置assets，图片直接嵌入到JS bundle中，不依赖外部资源路径。

方案3：配置宿主应用复制库的assets（不推荐，需宿主额外配置） #

在宿主应用的angular.json的assets数组中添加配置，将库的assets复制到宿主应用的assets目录：

{
  "projects": {
    "blog-editor-playground": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              // 原有配置
              {
                "glob": "**/*",
                "input": "./node_modules/blog-editor/assets",
                "output": "/assets/"
              }
            ]
          }
        }
      }
    }
  }
}

配置后，宿主应用构建时会自动复制库的assets，原有的相对路径引用即可生效，但每个使用该库的项目都需要重复配置。

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