时间戳

首页 > 解决方案 > 在 Angular 库组件模板中使用图像资源

angular - 在 Angular 库组件模板中使用图像资源

问题描述

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

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

我看过这个链接：Angular 组件库 - 模板中的图像引用

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

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

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

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

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

我将图像放在 src/assets/images 下的库中。

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

我尝试过的链接（其中大部分是我从建议的解决方案中获得的）：

等等

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

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

标签： angulartestingnpmcontinuous-integrationassets

解决方案

This Stack Overflow answer on the thread Include assets when building library using ng-packagr可能会有所帮助：

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

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

或者，您可以使用pkg-assets和npm-assets等 NPM 解决方案或使用 base64 编码的图像，如下所述：如何在 Angular 库中包含图像？

推荐阅读