ブートストラップカルーセルの画像は表示されません

Question

私のカルーセルには画像が表示されません。名前を何度か変更しようとしましたが、何も起こりません。私は画像をimgフォルダに入れています。私はGrayscaleテンプレートを使っています。誰か説明できますか？

<div class="container"> 
    <br> 
    <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> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="store" alt="store" width="460" height="345"> 
     </div> 

     <div class="item"> 
     <img src="art.jpg" alt="art" width="460" height="345"> 
     </div> 

     <div class="item"> 
     <img src=".jpg" alt="Flower" width="460" height="345"> 
     </div> 

     <div class="item"> 
     <img src="img_flower2.jpg" alt="Flower" width="460" height="345"> 
     </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> 
</div> 

Answer 1

画像のsrc属性の一部に拡張子が付いておらず、名前の一部に拡張子がありません。また、正しい画像パスを設定していない可能性があるので、src属性に問題があるはずです。

<img src="store" alt="store" width="460" height="345"> 
<img src=".jpg" alt="Flower" width="460" height="345"> 

Answer 2

複数の問題がここにあります

1. the carousel exampleを見た後、ラッパーの下のコンテナ（すなわち<div class="carousel-inner" role="listbox">がクラスカルーセル項目

   <div class="item"> 
       <img src="art.jpg" alt="art" width="460" height="345">` 
   

   が欠けているように見えます

   そのクラス名を追加してください：

   <div class="item carousel-item"> 
       <img src="art.jpg" alt="art" width="460" height="345">` 
   

2. イメージタグのソース属性の一部に、無効なファイル名が含まれているように見えます。 <img src="store" alt="store" width="460" height="345">

3. あなたは（おそらくあなたの心に異なるアイコンを持っている）それらをしたくない場合を除き、次および前のアイコンコンテナは、クラスアイコン-PREVとアイコンの横不足している：、また<span class="glyphicon glyphicon-chevron-left icon-prev" aria-hidden="true"></span>
4. をこれを実行した可能性がありますが、必要なCSSファイルとJSファイルを追加してください（Quick startセクションを参照）。

<link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <br> 
 
    <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> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="carousel-item active"> 
 
     <img src="https://lh5.googleusercontent.com/-H-d48F21u4Y/AAAAAAAAAAI/AAAAAAAAABU/axGFMUf4bwY/photo.jpg?sz=32" alt="store" width="64" height="64"> 
 
     </div> 
 

 
     <div class="carousel-item"> 
 
     <img src="https://i.stack.imgur.com/C92ci.png?s=64&g=1" alt="art" width="64" height="64"> 
 
     </div> 
 

 
     <div class="carousel-item"> 
 
     <img src="https://www.gravatar.com/avatar/fd047157030a440fa1f62e6e1ed87958?s=32&d=identicon&r=PG" alt="Flower" width="64" height="64"> 
 
     </div> 
 

 
     <div class="carousel-item"> 
 
     <img src="https://www.gravatar.com/avatar/fa3b74688aaf69a2d65fd846b0a82c59?s=32&d=identicon&r=PG&f=1" alt="Flower" width="64" height="64"> 
 
     </div> 
 
    </div> 
 

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