How to load image (and other assets) in Angular an project?
In my project I am using the following syntax in my app.component.html:
<img src="/assets/img/1.jpg" alt="image">or
<img src='http://mruanova.com/img/1.jpg' alt='image'>use [src] as a template expression when you are binding a property using interpolation:
<img [src]="imagePath" />is the same as:
<img src={{imagePath}} />
I fixed it. My actual image file name had spaces in it, and for whatever reason Angular did not like that. When I removed the spaces from my file name, assets/images/myimage.png worked.
Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes. For example :
- 'my-image-name.png' should be 'myImageName.png'
- 'my image name.png' should be 'myImageName.png'
If you put the image in the assets/img folder, then this line of code should work in your templates :
<img alt="My image name" src="./assets/img/myImageName.png">If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.