Dynamic background image using css in blade - laravel-blade

Question

I am trying to add a dynamic background-image to a carousel div in my blade template using a for each loop but the image doesn't appear.
this is my div
div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('{{ asset('main/img/hero/hero-1.jpg')}}')">
<div class="info">
<h2 class="text-capitalize text-white">best price & offer</h2>
<h1 class="text-uppercase py-2 fw-bold text-white">new season</h1>
<a href="{{route('shop.index')}}" class="btn" >buy now</a>
</div>
</div>
#if ($heros -> count())
#foreach ($heros as $hero)
<div class="text-center carousel-item carousel vh-100 vw-100 dynamic" style="background-image: url('{{ asset('upload/hero/'.$hero->image)}}')">
<div class="info">
<h2 class="text-capitalize text-white">best price & offer</h2>
<h1 class="text-uppercase py-2 fw-bold text-white">new season</h1>
<a href="{{route('shop.index')}}" class="btn" >buy now</a>
</div>
</div>
#endforeach
#endif
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
However, I see the correct file path in the styles tab when i inspect the page.
Please what am I doing wrong?
I have tried other altenatives like using
style="background-image: url('{{ url('upload/hero/'.$hero->image)}}')"
instead of
style="background-image: url('{{ asset('upload/hero/'.$hero->image)}}')"
but the result is the same.
I even tried adding the background-image to the dynamic class in my css like this
<style>
.dynamic{
background-image: url('{{ asset('upload/hero/' . $hero->image) }}') !important;
}
this also did not work.
Please I need all the help I can get