Search code examples
angularimagengfor

Image list in angular

I have an array containing the src and caption. i need to display the images in the list looping through the array.

IMAGES = [
{
  src: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
  caption: 'It\'s a thing',
},
{
  src: 'https://picsum.photos/200',
  caption: 'This is a really long string to see how the text will overflow',
},
{
  src: 'https://picsum.photos/200',
  caption: 'It\'s a thing',
},
{
  src: 'https://picsum.photos/200',
  caption: 'It\'s a thing',
},
{
  src: 'https://picsum.photos/200',
  caption: 'It\'s a thing',
},
{
  src: 'https://picsum.photos/200',
  caption: 'It\'s a thing',
}
];
Solution

  • Please check the below code and you can use div and inside div img tag.

    <div *ngFor="let image of IMAGES">
    <img [src]="image.src" [attr.alt]="image.caption" [attr.title]="image.caption" width="100" height="100">
</div>