Слайд-изображение с каруселью из хранилища не может начаться без активного класса

Question

Я хочу загрузить изображение из папки хранения Laravel 5.6 и поместить его в слайдер изображений Carousel Bootstrap 4, но когда я сделал это с foreach loop laravel, оно сложилось.Есть ли способ сделать, как я хочу?Извините, мой английский не так хорош, спасибо!

Вот мой клинок

@extends('layout.home') @section('content')

<div class="mt-4">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner m-auto">

      @if(count($products)>0) @foreach($products as $product)
      <div class="carousel-item">
        <img class="d-block w-75" src="/storage/product_images/{{$product->product_image}}" alt="First slide">
      </div>
      @endforeach @else
      <div class="carousel-item active">
        <img class="d-block w-75" src="/storage/product_images/noimage.jpg" alt="">
      </div>
      @endif
      <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>
  </div>
  <h1>Profile</h1>
  <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

</div>

@endsection

Вот неудачный слайд

неудачный слайд со сложенным изображением

Answer 1

Вместо использования

 <img class="d-block w-75" src="/storage/product_images/{{$product->product_image}}" alt="First slide">

используйте вот так

  <img class="d-block w-75" src="{{ asset('storage/product_images/'.$product->product_image) }}" alt="First slide">

Функция asset () указывает на корневой каталог вашей папки

Answer 2

я сделал это, изменив

<div class="carousel-item">
    ...
</div>

в:

<div class="carousel-item @if($product->id === $product->first()->id) {{ 'active' }} @endif">