砌体画廊答案

【问题标题】：Masonry Gallery砌体画廊
【发布时间】：2019-11-20 16:07:44
【问题描述】：

我正在使用 Angular 并想创建一个砖石图像库。

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

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

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

预期结果

【问题讨论】：

标签： angular typescript masonry angular-masonry

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：