CODEWITHSUNDEEP
htmlcssangularangular2-template
Prad
Prad

Reputation: 150

How to load images in angular2

Hello I am new to angular 2 . I am in a small project , where I have to set images. This is my app.component.ts

` 

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
fullImagePath: string;
constructor() {
    this.fullImagePath = '/assets/imges/therealdealportfoliohero.jpg'
  }
ngOnInit() {
  }
}

`

and the html is `

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

`

but in this process I have to declare all the images in separate variable.but I want to declare an array ,and load all and use them like `

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath/(myImagename)">
    </div>
</div>

`

Upvotes: 0

Views: 9867

Answers (2)

DGarvanski
DGarvanski

Reputation: 2595

You can use *ngFor if you want to iterate through an array. For example, if you have this array of image paths:

this.imagePaths = ['image/path/1.png', 'image/path/2.png', 'image/path/3.png']

You can do this in your html:

<div class="row">
    <div class="col-xs-12">
        <div *ngFor="let path of imagePaths">
           <img [src]="path">
        </div>
    </div>
</div>

If you want to only iterate through an array of image names you can do it this way:

If you get an array with image names while already having a base URL:

this.imageUrl = '/assets/images/';
this.images = ['1.png', '2.png', '3.png'];

You can do it this way:

<div class="row">
    <div class="col-xs-12">
        <div *ngFor="let image of images">
           <img src="{{imageUrl + image}}">
        </div>
    </div>
</div>

Or, if you haven't set an imageUrl property, you can do this:

<div class="row">
        <div class="col-xs-12">
            <div *ngFor="let image of images">
               <img src="/assets/images/{{image}}">
            </div>
        </div>
    </div>

Upvotes: 3

Prad
Prad

Reputation: 150

Yes I got it

<img id="logo" [src]="fullImagePath + '/logo.png'" alt="Simpla Admin logo" />

and I don't have to declare as an array. just

this.fullImagePath = '/assets/imges';

Upvotes: 1

Related Questions