Access images in component library

Question

I have a Angular 7 component library and I am trying to add some images for buttons and the like.

My project structure looks like this

projects
 components
   src
     lib
       myComponent
         assets
            images
               image.png 

The component that I am trying to use the image in is at the same level as the "assests" folder.

For instance I've added this button

<p>
<button (click)="activateSelect()"><i 
src="../../assets/images/tempImage.png"></i></button>  
</p>

...but when I build and use dev tools in Chrome to look at the button the path to the image is http://localhost/assets/images/tempImage.png

Seems like routing isn't working correctly for this?

I've tried relative paths, "./", just putting the path in and nothing is working. This seems harder than it should be so I'm sure I'm not understanding something about how this works.

Any help is greatly appreciated.

UPDATE I never got an image to work on a button but I replaced the "button" tag with an "img" tag and got it to work like this...

<img style="background-color: aliceblue;width:35px;height:35px" 
(click)="activateSelect()" src="assets/tempSelect.png">

UPDATE 2 The above works if you want the images in the "assets" folder of your application. I am building a component library that I need my assets to travel along with...is there a way to make a folder with assets in a component library that you can build and expose with the component library?

UPDATE 3 In order to get your images into your component library so that everything is self contained you will need to use a tool to base 64 encode your images. I used https://base64.guru/converter/encode/image Once in the tool select your image and then pick the "Output Format" I used "Data URI -- data:content/type;base64" Then click the "Encode image to base 64" button This will output a string like this

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAABTElEQVRIie2WwY2DMBBFX1YpICVQQkpwCSmBk+dKCSmB69wogRIowSW4BDpgDx4kFIEwISG7Ur7kAxqL5+/5Bp+GYeAT+vkI9Qv+s2ARqQ8Hi4gDylfBtzgugBpwIlIeDQ6AA+4icj0K7ICgqj1QAo2IXI4AF6oaAVS1AxobbwfH6YOq1kAvIve3gS3RcaZUATervx4MXOfAD/0u3gEugG6uoKqB5LzdErZdjifwFmhJ5zxPwzCsDu99zJzXee/LnLnntYXZ9i26FZHG6sEc1yISrAWLWgWTtjlMFlEDlQUL0oelsnmFLaIihW43ONqRaYDeYK3VO6BX1XvGuzaDLyQHN5KrR7BjIfVLykl1gbm0vo2gUY/PecpJ4Ex6g/f+sjX103F65nprl4FIaoGzXXHjTyRHOT2eU0NKbgeUW4CjnnL8Cv2PW+YXvEe/8QAaBBU+rp8AAAAASUVORK5CYII=

As you can see the above is a "png" image be sure that this property matches the type of image you are using.

Once you have this string you can set a variable to it in your component and add this accessor to the element you want your image in

 [src]="YourImageVariable"

This will not work with a button since [src] isn't a know property of button but it can be used with

Answer 1

Since the library component doesn't have project root so it always fetches assets from main project root i.e. assets folder where we are consuming library.

so either you have to use base64 data URL or CDN images.

you can encode images to base64 data URL and use them like

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

or bound to a component property

<img [src]="imageFoo">

Answer 2

As you said, why didn't you store your images in src/asset directory? It should work. I see you have an asset folder in the component folder, so is this the same for other components? Anyway, if you want angular serve assets that stored outside src/asset, you have to tell angular you did that or angular will see it is a routing url instead of an image url

in angular.json, look for

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],

add your own asset folder here

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/lib/myComponent/assets"
],

Answer 3

Try this:

src="assets/images/tempImage.png"

Answer 4

In my project I used ../../../assets/images/icon/multi-y-axis-20x20.png

You use .. to go up parent folder.