How to display images in Angular2 ?

We can serve an image in angular2 by first placing the image in the assets directory of your project where you can create a specific directory for the images or just keep it in the assets directory as it is.
Once you have put all the required images in the assets directory open the specific component typescript (.ts) file where you want to serve the image. Now you can add the URL of the image in a variable within the constructor so that it is initialized upon component creation.

Example
Demo.Component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
  
export class DemoComponent implements OnInit {
  ImagePath: string;
  
  constructor() {
    //image location
    this.ImagePath = '/assets/images/sample.jpg'
  }
  
  ngOnInit() {
  }
  
}

chevron_right


Now modify the component’s template file to fetch the image.
Demo.Component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--...header and body content-->
  
<mat-card class="example-card" >
  <mat-card-header class="example-header" 
                   style="padding-left: 40%;">
   <h2><span></span>GeeksforGeeks</h2  >
  </mat-card-header>
  <mat-card-content>
    <img [src] ="ImagePath" 
          style="width: 600px;height: 400px;">
  </mat-card-content>
</mat-card>
  
<!--... body and footer content-->

chevron_right


Output: Output image

You can also fetch a web image directly from the website or database(For Ex. Firebase) by providing the full valid URL of the image.

NOTE:
In angular2, images and other media are by default fetched from the assets directory within your project folder(all other directories of the project are not public to the components by default) this can be changed by modifying angular-cli.json.Within this JSON file add your media directory by adding it in the assets object property.

filter_none

edit
close

play_arrow

link
brightness_4
code

//add a new directory or image to start fetching from that location
  
"assets": [
 "assets",
 "img",
 "favicon.ico",
 ".htaccess"
]

chevron_right


full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.