砌体画廊

Question

我正在与angular一起工作，并希望创建一个石工图像库。

我尝试建立图库，但是图像对我而言似乎不显示。 有谁知道他们为什么出现以及如何解决这个问题？

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

Stackblitz

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是一个对象；在您的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>