Search code examples
angulartypescriptmasonryangular-masonry

Masonry Gallery

I am working with angular and want to create a gallery of masonry images.

I tried to implement the gallery, however the images do not appear to me. Does anyone know why they appear and how to solve this problem?

I'm new to this kind of environments and may have gone the wrong way :(

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>

Intended result

Image

Solution

  • You are missing the object property: [src]="image" must be [src]="image.src".

    You are iterating through a list of objects, where 'image' is one item of the list. You were sending the object to the image, which won't work because it expects a URL string. So the right way is to send use 'image.src', which is the URL string.

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