CODEWITHSUNDEEP
angular
eli
eli

Reputation: 313

How to include images in an Angular library?

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.

Upvotes: 11

Views: 18162

Answers (4)

Eeshwar Ankathi
Eeshwar Ankathi

Reputation: 266

I am using scss styling and below is the process that I followed.

in scss:

.logo {
       background: url("../../../assets/images/sprite/template.png") 0px 15px;
       width: 90px;
}

in html

<div class="navbar-brand logo"></div>

Upvotes: -3

LeonardoX
LeonardoX

Reputation: 1313

You can use an encoded base64 image in a template inline as pointed in previous answers, using this option (not tested by me) if you don't have to use the image in more than one place, otherwise your bundle would grow unnecessary.

Or you can "load" the image in the component as a variable and use it in your template using require("./assets/some-file.png") as explained in this post

Note: As Assets coping is not currently supported by ng-packagr when building Angular Libraries, ensure to include assets folder in /dist as explained in this post

Upvotes: 0

Estus Flask
Estus Flask

Reputation: 223194

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

Upvotes: 10

crooksey
crooksey

Reputation: 8809

See this answer here for bundling images with webpack (which I presume you are using as you have not stated otherwise).

Bundle images with webpack

In short, the image path needs to be relative to the template location:

<img src="../assets/images/myImage.png">

Upvotes: -1

Related Questions