如何在 Angular 库中包含图像？

Question

我创建了一个简单的 Angular 库，我希望我的库也显示图像。问题是，如果我将图像包含在库的模块文件夹中，然后从模块内部引用它，则会出现 404 错误。据我所知，在 Angular 项目中，图像必须放在 /assets 文件夹中，但我确实需要将此图像包含在我的库中。

我将图像放在模块文件夹中，并从.html我的模块组件的文件中引用它：<img src="myImage.png">，但它不起作用。

Answer 1

这里有几个选项，没有一个是完美的。

图像可以使用 base64 编码为数据 URL 并用于内联模板：

<img src="data:image/jpg;base64,...">

或者绑定到包含数据 URL 的组件属性：

<img [src]="imageFoo">

图像可以与包一起包含，并且可以指示用户将它们复制到网站公共目录中。由于公共路径事先未知，模块可以接受常规forRoot方法的图像路径配置并将其用于图像路径：

@Component({
  ...
  template: `<img src="{{imagesPath}}/foo.jpg">`
})
class SomeComponent {
  constructor(@Inject(IMAGES_PATH) public imagesPath: string) {}
}