Search code examples
imageserverbootstrap-4slidercarousel

Bootstrap carousel slider is working but images not appear


I have some problem with carousel. I develop my project and use bootstrap-4 carousel slider. When I run my localhost, there aren't any problem. All properties work properly and appear carousel images. Nevertheless i published project on my server, but slider's images not appear. Console error is "Not found any image", but image show on my server documents. Sliding is working. Only images not appear.

What's the problem here?

.about #plas-slider {
  margin-top: 40px;
  height: 611px;
  width: 1360px;
  float: right;
}

.about #plas-slider a {
  position: absolute;
  width: 64px;
  height: 64px;
  float: left;
}

.about #plas-slider .carousel-control-prev {
  left: 0;
}

.about #plas-slider .carousel-control-next {
  left: 64px;
}

.about #plas-slider a img {
  height: 64px;
  width: 64px;
  float: left;
}
<section class="about">
  <div id="plas-slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="/Assets/images/s3x-2691-1033-1135.png" class="d-block w-100 img-fluid" alt="Slide 1">
      </div>
      <div class="carousel-item">
        <img src="/Assets/images/s3x-2691-1033-1136.png" class="d-block w-100 img-fluid" alt="Slide 2">
      </div>
      <div class="controls">
        <a class="carousel-control-prev" href="#plas-slider" role="button" data-slide="prev">
          <img class="img-fluid" src="Assets/images/Group 381.png" aria-hidden="true" />
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#plas-slider" role="button" data-slide="next">
          <img class="img-fluid" src="Assets/images/Group 380.png" aria-hidden="true" />
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</section>


Solution

  • try removing the / in src="/Assets/images/s3x-2691-1033-1136.png". It will look like this: src="Assets/images/s3x-2691-1033-1136.png"