how to display product images using angular?

Question

in component show I have a product, a product has an images field, which contains an array of images links, and in my component show there is a carousel, so I want to display these images in carousel, and I don't know how.

show.component.html

<div class="carousel-inner">
                            <div class="carousel-item active" *ngFor="let product.images of image">
                                <img src="{{ annonce.image }}" class="d-block w-100" style="width:600px;height:400px" alt="image">
                            </div>
                            
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

the product images field

images: "http://localhost/aswakb/public/storage/[\"annonces\\\\September2020\\\\animaux1.jpg\",\"annonces\\\\September2020\\\\animaux2.jpg\",\"annonces\\\\September2020\\\\animaux3.jpg\",\"annonces\\\\September2020\\\\animaux4.jpg\",\"annonces\\\\September2020\\\\animaux5.jpg\"]"