Изображения в карусели Bootstrap не отображаются

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. Если вы не хотите, чтобы они (возможно, у вас есть различные значки в виде), следующие и предыдущий значок контейнеры отсутствуют классы пиктограмм ПРЕД и пиктограмм следующей: <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>