How to include images in an Angular library?

There are several options here, none of which is perfect.

An image can be encoded with base64 to data URLs and used in a template inline:

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

Or be bound to component property that contains data URL:

<img [src]="imageFoo">

Images can be included alongside with the package, and a user can be instructed to copy them into website public directory. Since public path is unknown beforehand, the module can accept image path configuration with conventional forRoot method and use it for image path:

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

Tags:

Angular