Open In App
Related Articles

How to display images in Angular2 ?

Improve Article
Save Article
Like Article

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.


import { Component, OnInit } from '@angular/core';
  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() {

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

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

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.

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.

//add a new directory or image to start fetching from that location
"assets": [

Last Updated : 27 Jun, 2020
Like Article
Save Article
Similar Reads
Related Tutorials