This tutorial shows multiple examples in Angular, One example is to load images using the img tag Another example is to bind the src attribute to the assets folder
Angular Img tag binding
Normally, Images are placed in the src/assets folder in the Angular application.
src
|__assets
|__images
|__first.png
|__app
|__app.component.html
Img
tag is used to display an image on an angular application.
It is declared in HTML template file
<img src="path" alt="text">
src
contains absolute path of images that referred from HTML file
alt contains string content to display on image for SEO purpose
to bind a path and alt from a typescript component, use binding square syntax.
Declare variable of an string
path: string = "../assests/images/first.png";
alttext: string="first image"
display in html template with expression syntax
<img [src]="path" [alt]="alttext">
[src]=path is binding to typescript component variable path
or you can use the variable directly using {{}}
syntax without binding
<img src="{{path}}" alt="{{alttext}}">
Image does not show in Angular
Please follow below steps
- If images do not display correctly, check src/assets folder is included inside the assets attribute in the angular.json file of your angular application.
"assets": [
"src/favicon.ico",
"src/assets"
],
- Check path relevant HTML file location with the assets folder
- Check image binding is correctly done