angular - 如何在 Angular 库中包含图像？

Question

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

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

Answer 1

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

图像可以使用 base64 编码为数据 URL，并在内联模板中使用:

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

或者绑定(bind)到包含数据 URL 的组件属性:

<img [src]="imageFoo">

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

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