How to include images in an Angular library?

Question

I created a simple Angular library and I want my library to also display an image. The problem is that if I include the image inside the module folder of my library and then refer to it from inside the module, I get 404 error. As far as I know, in an Angular project images must be placed inside /assets folder, but I really need to include this image in my library.

I placed the image inside the module folder and refered to it from a the .html file of my module component:<img src="myImage.png">, but it doesn't work.

Answer 1

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) {}
}