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
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() { } } |
Now modify the component’s template file to fetch the image.
Demo.Component.html
<!--...header and body content--> <mat-card class="example-card" > <mat-card-header class="example-header" style="padding-left: 40%;"> <h2><span></span>neveropen</h2 > </mat-card-header> <mat-card-content> <img [src] ="ImagePath" style="width: 600px;height: 400px;"> </mat-card-content> </mat-card> <!--... body and footer content--> |
Output: 
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.
//add a new directory or image to start fetching from that location "assets": [ "assets", "img", "favicon.ico", ".htaccess"] |