Bootstrap傳送帶圖像未加載

Question

變得瘋狂：D被卡住了三天。

我想把旋轉木馬放在我的頁面中，我正在加載位於我的機器中的圖像，每個圖像的尺寸爲1200 * 480。 當我測試它時，圖像不顯示。 這是代碼：

<div class="jumbotron"> 
    <h1>Kurt Angle</h1> 
    <p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div> 

<!--CAROUSEL BEGINES--> 
<div class="fluid-container"> 
    <div class="carousel slide" 
     data ride="carousel" 
     id="carousel"> 

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

    <!--wrapper of the images(itmes)---> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1"> 
     </div> 

     <div class="item"> 
     <img src="file:///home/davide/Pictures/angle%20cropped%202.jpg" 
      alt="slide2"> 
     </div> 

     <div class="item"> 
     <img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg" 
      alt="slide3"> 
     </div> 
    </div> 

    <!--now let's put right and left control--> 
    <a class="left carousel-control" 
     href="#carousel" 
     role="button" 
     data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 

CSS: 
.jumbotron{ 
    background-color: #241f14 !important; 
    color: #ffffff; 
    } 

.carousel .item{ 
    height: 100%; 

} 

Codepen page

請你能幫助我嗎？

Answer 1

試試這個：

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

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image"> 
     <div class="carousel-caption"> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image"> 
     <div class="carousel-caption"> 
      <h3>Lorem</h3> 
      <p>Lorem ipsum...</p> 
     </div> 
     </div> 
    </div> 

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

DEMO HERE