how to render array of images in html view?

Question

Have below List of strings which contains images. How I can show it on page in the angular?

images: "[
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/340ea5ee01acc37f.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/9b75ea873012234c.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/d12b3a343f16cb28.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/ff80cdc13a9832df.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/c11025d7f461121b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/bb783cf9a2b1f35b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/3d68e6affdf43c18.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/0fbd36321cf49f40.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/63ef79df1ffcfef5.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/acc162dea7861b9b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/e7717c4955e5a81c.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/09938b4f62ca370e.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/697ac4b4514d9d5c.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/e0306175706fe9ce.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/6d09a807ebb7860b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/10bd1eba8dfe318b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/cff9e8bd0c7e5ec7.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/722e852d720c3d25.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/dc3e2c5631c8ab48.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/9c0ac971e3a244e0.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/616b292e99049410.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/ae03a8b55273958a.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/748114df7b1ecb21.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/021358e328ecc9dd.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/13174c9f54ada03f.jpg"
]"

dose this stackoverflow.com/questions/43083605/… is your answer? — kushal shah
– kushal shah, Commented Jan 8, 2020 at 6:54

Krishna Rathore · Accepted Answer · 2020-01-08 06:59:29Z

1

use *ngFor and [src] for render image in html view

Stackblitz

<div  *ngFor="let image of images" >
  <img [src]='image'/>
</div>

answered Jan 8, 2020 at 6:59

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrita Sharma · Accepted Answer · 2020-01-08 07:00:21Z

0

Try like this:

.ts

images:[
"https://images.oyoroomscdn.com/uploads/hotel_image/1097/340ea5ee01acc37f.jpg",
"https://images.oyoroomscdn.com/uploads/hotel_image/1097/9b75ea873012234c.jpg"
]

.html

<div *ngFor="let img of images">
    <img [src]="img" />
</div>

answered Jan 8, 2020 at 7:00

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

how to render array of images in html view?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related