angular - 砌体画廊

Question

我正在使用 angular 并想创建一个砖石图像画廊。

我试图实现画廊，但我看不到图像。有谁知道他们为什么出现以及如何解决这个问题？

我是这种环境的新手，可能走错路了:(

堆栈闪电战

组件.html

  <ul class="mdc-image-list mdc-image-list--masonry masonry-image-list">
  <li class="mdc-image-list__item"
      *ngFor="let image of data">
   <img class="mdc-image-list__image"
        [src]="image">
  </li>
</ul>

预期结果

Answer 1

image是一个对象；试试image.src你的<img [src]= "image.src">:)

Answer 2

您缺少对象属性：[src]="image" 必须是 [src]="image.src"。

您正在遍历对象列表，其中“图像”是列表中的一项。您将对象发送到图像，这将不起作用，因为它需要一个 URL 字符串。所以正确的方法是发送使用'image.src'，也就是URL字符串。

<ul class="mdc-image-list mdc-image-list--masonry masonry-image-list">
  <li class="mdc-image-list__item"
      *ngFor="let image of data">
         <img class="mdc-image-list__image"
            [src]="image.src">
  </li>
</ul>