como estan?, necesito una ayuda, resulta que tengo una api, el cual contiene los siguientes datos
{
"id": "249942",
"name": "Hotel Stefanos",
"stars": 3,
"price": 994.18,
"image": "4900059_30_b.jpg",
"amenities": [
"safety-box",
"nightclub",
"deep-soaking-bathtub",
"beach",
"business-center"
]
},
entonces, en el apartado "amenities" se ven varios datos, estos son los id de varias imagenes que estan guardadas localmente, lo que necesito es insertar todas esas imagenes y que me las muestre en la pagina web, es decir, dependiendo el nombre insertar la imagen, eso si deben insertarse de una sola vez, no he encontrado la forma de realizarlo, estoy trabajando con angular y este es mi html hasta el momento
<body>
<div class="contenedor">
<header class="header">
<app-footer></app-footer>
</header>
<main class="contenido">
<div class="form-group">
<img class="imgbusqueda" src="../assets/icons/filters/search.svg">
<input type="text" class="forms-control" placeholder="Buscar Hotel" [(ngModel)]="FilterPipe"
name="FilterPipe" />
<div></div>
</div>
</main>
<aside class="sidebar">
<div class="row">
<ul>
<li class="lista-hoteles">
<div class="lista" *ngFor="let hoteles of hoteles | filter:FilterPipe, FilterStar " >
<div class="card">
<div class="card-inner">
<div class="image">
<img class="card-img-top" src="assets/images/hotels/{{hoteles.image}}">
</div>
<div class="namehotel">
<h2 style="color:rgb(57, 67, 194)"><strong>{{hoteles.name}}</strong></h2>
</div>
<div class="estrellas">
<h3>Esrellas: {{hoteles.stars}} </h3>
<img src="assets/icons/filters/star.svg" repeat="{{hoteles.stars}}" width="40px" height="40px">
</div>
<div class="parrafo">
<p>Precio por noche habitacion</p>
<div class="valorhab">
<p id="precio" style="color:rgb(238, 166, 11)" font-size="20"> ARS
<strong>{{hoteles.price}}</strong></p>
</div>
<div class="boton">
<button type="button" class="btn btn-primary">VER HOTEL</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<footer class="footer">
<h3>Andres Rozo</h3>
</footer>
</div>
</body>