砌体画廊

Question

我正在与 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>

预期结果

Answer 1

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

Answer 2

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

您正在遍历对象列表，其中 'image' 是列表中的一个项目。您正在将对象发送到图像，这将不起作用，因为它需要一个 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>

砌体画廊

Masonry Gallery

typescript

masonry

angular-masonry

angular