angular 中的图像列表

Question

我有一个包含 src 和标题的数组。我需要在数组中循环显示列表中的图像。

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',
}
];

Answer 1

请检查以下代码，您可以使用 div 和内部 div img 标签。

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

angular 中的图像列表

Image list in angular

image

ngfor

angular