CODEWITHSUNDEEP
htmlangular
Wojciech Abacki
Wojciech Abacki

Reputation: 251

Displaying image in Angular?

I'm new in Angular and I try display image ussing assets

I have some service 

const IMAGES = [
{"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"},
{"id":2, "category": "boats", "caption": "Sailing the coast", "url":"assets/img/boat_02.jpeg"},
{"id":3, "category": "boats", "caption": "The water was nice", "url":"assets/img/boat_03.jpeg"}]

getImages() {
      return this.visibleImages = IMAGES.slice(0);
}

In component i use 

this.visibleImages = this.imageService.getImages();

and display it 

<div class="row">
  <ul id="thumbnailsList">
    <li *ngFor="let imtage of visibleImages" >
      <img src="{{image.url}}" class="tn" width="200" height="160">
      <img src="assets/img/boat_02.jpeg" class="tn" width="200" height="160">
    </li>
  </ul>
</div>

but I have error that cannot display url or undefined but when I use 

<img src="assets/img/boat_02.jpeg" class="tn" width="200" height="160">

it's work fine.

Upvotes: 1

Views: 962

Answers (1)

Walter White
Walter White

Reputation: 1026

It's error this is kind of typos 

<li *ngFor="let imtage of visibleImages" >

change to 

  <li *ngFor="let image of visibleImages" >

Upvotes: 2

Related Questions