using for loop to render image in background image

I am trying to render an image in my carousel from the database, using a for loop.

But I am stuck on how to use a for loop here, and how to render an image in style="background-image:url.

My code:

<div class="banner-carousel banner-carousel-1 mb-0">
    @for ($i = 0; $i < count($sliders); i++)
        <div class="banner-carousel-item" style="background-image:url(images/{{$sliders[i]['']]}})">
            <div class="slider-content">

                <div class="row align-items-center h-100">
                    <div class="col-md-12 text-center">
                        <p data-animation-in="slideInLeft" data-duration-in="1.2">
                        <h2 class="slide-title" data-animation-in="slideInDown">Meet Our Engineers</h2>
                        <h2 class="slide-title" data-animation-in="slideInLeft">17 Years of excellence in</h2>
                        <h3 class="slide-sub-title" data-animation-in="slideInRight">Construction Industry
                        </h3>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    @endfor
</div>

My image is in public/images folder in the app.

Solution

i++ is not valid Blade syntax — you need to use $i++ instead. Based on your $sliders payload, the 'image' key is just an example; you'll need to adapt it according to the actual structure of your data.

<div class="banner-carousel banner-carousel-1 mb-0">
    @for ($i = 0; $i < count($sliders); $i++)
        <div class="banner-carousel-item" style="background-image:url('{{ asset('images/' . $sliders[$i]['image']) }}')">
            <div class="slider-content">
                <div class="row align-items-center h-100">
                    <div class="col-md-12 text-center">
                        <h2 class="slide-title" data-animation-in="slideInDown">Meet Our Engineers</h2>
                        <h2 class="slide-title" data-animation-in="slideInLeft">17 Years of excellence in</h2>
                        <h3 class="slide-sub-title" data-animation-in="slideInRight">Construction Industry</h3>
                    </div>
                </div>
            </div>
        </div>                
    @endfor
</div>