Angular 4 img src is not found

Question

I'm having a problem with sourcing an image with angular 4. It keeps telling me that the image is not found.

Folder structure:

app_folder/ app_component/   - my_componenet   - image_folder/       - myimage 

I am using the image in mycomponent. If in mycomponent, I insert it directly with:

<img src="img/myimage.png" 

This works fine, but I checked the html and it creates a hash. But my images have to be dynamically added to the html because they are part of a list. So, if I use:

<img src="{{imagePath}}"> 

which is basically img/myimage.png, it doesn't work. If I use:

<img [src]="imagePath"> 

It says NOT FOUND (htttps://localhost/img/myimage.png). Can you help me?

Answer 1

AngularJS

<img ng-src="{{imagePath}}"> 

Angular

<img [src]="imagePath"> 

Answer 2

Copy your images into the assets folder. Angular can only access static files like images and config files from assets folder.

Try like this: <img src="assets/img/myimage.png">