在Angular Library组件模板中使用图像资产

问题描述

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

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

我看过以下链接Angular component library - image references in templates

对于我想做的事情似乎没有提出可行的解决方案。

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

使用Angular 9+,资产可以很好地复制到dist文件夹中,所以这不是问题。

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

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

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

现在,我想在一个库的html模板中的一个'img'元素中使用图片

我尝试过的链接(大部分都是从建议的解决方案中获得的):

  • '/ assets / images / myimg.png'
  • '../ assets / images / myimg.png'
  • 'assets / images / myimg.png'
  • '/ src / assets / images / myimg.png'

我想我几乎尝试了所有可能的变体,没有运气。

是否需要一些配置才能使其正常工作?哪个链接可以从库中引用资产文件夹?另外,我想从安装该库的应用程序中引用诸如字体和样式表之类的内容,但这似乎要容易得多(好吧,除了以一种方式引用它们时,这种方式都可以在包含以下内容的工作空间中进行测试时使用)测试应用和库,以及安装库之后。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)