Question

我是Angular的新手，我尝试显示图像资产

我有一些服务

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);
}

在组件i中使用

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

并显示它

<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>

但我有错误，无法显示网址或未定义，但何时我用

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

工作正常。

Answer 1

这是错误，这是一种拼写错误

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

更改为

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

在Angular中显示图像？

1 个答案: