在 Angular 库组件模板中使用图像资源答案

【问题标题】：Use an image asset in an Angular Library Component Template在 Angular 库组件模板中使用图像资源
【发布时间】：2021-01-02 06:45:02
【问题描述】：

我正在使用 Angular 10，我想创建一个包含一些图像和样式表的组件库。我需要能够从组件 html 模板中定义的组件模板中引用这些图像。

我对 Angular 很陌生，但我是一名资深的软件工程师，我想确保我们可以让 Angular 在我们的 CI 环境 (Jenkins) 中工作。这意味着构建是可移植的（不需要硬编码的路径或参数）、可自动构建、可测试和可部署。

它似乎没有为我想做的事情提出一个可行的解决方案。

我能够构建、运行测试并将我们的库包发布到我们的内部 npm 存储库。

使用 Angular 9+，资产被复制到 dist 文件夹就好了，所以这不是问题。

我不知道如何从库组件的 html 模板中引用图像。我尝试过的一切都会导致 404。我见过的所有建议的解决方案都不起作用。许多解决方案建议将图像放在模板中的编码字符串中。如果可能的话，我真的很想避免这种情况，因为它增加了将资产放入库的额外步骤。

我希望能够在工作区中测试应用程序时以及在库位于 npm 包中之后引用图像。这样，当我在 CI 中构建和测试时，以及将 npm 包导入项目后，它都可以工作。

我把图片放在了 src/assets/images 下的库中。

现在，我想在库的一个 html 模板中的一个“img”元素中使用图像。

我尝试过的链接（其中大部分来自建议的解决方案）：

等等

我想我几乎尝试了所有可能的变化，但没有运气。

我需要做一些配置才能让它工作吗？哪个链接可以从库中引用 assets 文件夹？作为奖励，我想从安装库的应用程序中引用字体和样式表之类的东西，但这似乎要容易得多（好吧，除了在从包含测试应用程序和库，并在安装库之后）。

【问题讨论】：

【解决方案1】：

线程 Include assets when building library using ng-packagr 上的这个 Stack Overflow answer 可能会有所帮助：

建议将此映射添加到使用该库的项目中的angular.json：

{ "glob": "**/*", "input": "../node_modules/my-lib/assets", "output": "./assets/my-lib/" }

或者，您可以使用 NPM 解决方案，如 pkg-assets 和 npm-assets 或使用 base64 编码图像，如下所述：How to include images in an Angular library?

【讨论】：