CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapcarousel
vpoltave
vpoltave

Reputation: 1770

Carousel image does not load in Bootstrap

I have the following code and upon loading in browser, the image doesn't load in the carousel and returns:

Failed to load resource: the server responded with a status of 404

Project directory image
enter image description here

<div id="carousel" class="carousel slide">
<!-- Carousel Indicators-->
<ol class="carousel-indicators">
    <li class="active" data-target="#carousel" data-slide="0"></li>
    <li data-target="#carousel" data-slide="1"></li>
    <li data-target="#carousel" data-slide="2"></li>
</ol>

<!-- First Slide -->
<div class="carousel-inner">
    <div class="item active">
        <img src="/images/me-slider-background.jpg"/>
        <div class="carousel-caption">
            <h3>First slide</h3>
            <p>Description</p>
        </div>
</div><!-- Second Slide -->
    <div class="item">
        <img src="/images/me-slider-background.jpg"/>
        <div class="carousel-caption">
            <h3>Second Slide</h3>
            <p>Description</p>
        </div>

    </div>

        <!-- Left and right controls -->
        <a href="#carousel" class="left carousel-control" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a href="#carousel" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
        </a>
    </div>

</div>`

Upvotes: 2

Views: 1843

Answers (1)

danny barlev
danny barlev

Reputation: 224

The source for images your wrote is not correct because you are not in the root directory.

Do somthing like this:

<img src="../images/me-slider-background.jpg"/>

Upvotes: 1

Related Questions