Я пытаюсь загрузить свои изображения в карусель с помощью Ruby. Однако, когда я ввожу определенный код, я получаю нежелательное изображение. Код ниже.
<div class = "page-wrap">
<h1> Bikes</h1>
<h2> The best source for bikes!</h2>
<div id = "carousel-example-generic" class = "carousel slide" data-ride = "carousel">
<!-- Indicators -->
<ol class = "carousel-indicators">
<% @products.each_with_index do |product| %>
<li data-target = "#myCarousel" data-slide-to = "<%= 'product' %>" class = "<%= product == 0 ? 'active' : '' %>"></li>
<% end %>
</ol>
<!-- Wrapper for slides -->
<div class = "carousel-inner" id = "carousel_images">
<% @products.each_with_index do |product| %>
<div class = "item<%= " active" if product == @products.first %>">
<% if product.image_url.present? %>
<%= image_tag ("mbx.jpg") %>
<% end %>
<div class = "carousel-caption">
<%= product.name %>
</div>
</div>
<div class = "item">
<% if product.image_url.present? %>
<%= image_tag (product.image_url) %>
<% end %>
<div class = "carousel-caption">
<%= product.name %>
</div>
</div>
<% end %>
</div>
<!-- Controls -->
<a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev">
<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
<span class = "sr-only">Previous</span>
</a>
<a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next">
<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
<span class = "sr-only">Next</span>
</a>
</div>
Он показывает продукты, когда я их вставляю напрямую (mbx.jpg). Однако они будут отображаться не в виде карусели, а в статике.
Кроме того, это код, который появляется для нежелательного изображения в инструментах разработчика, и я не знаю, как его изменить. Я уже добавил продукты, использующие http: // локальный: 3000 / продукты / новый, и, по-видимому, у меня уже есть 7, но я не могу показать ни один из них.






Убедитесь, что вы следуете всем Рекомендации по загрузке. Вот как это должно выглядеть:
<div id = "carouselExampleSlidesOnly" class = "carousel slide" data-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item active">
<img class = "d-block w-100" src = ".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt = "First slide">
</div>
<div class = "carousel-item">
<img class = "d-block w-100" src = ".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt = "Second slide">
</div>
<div class = "carousel-item">
<img class = "d-block w-100" src = ".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt = "Third slide">
</div>
</div>
</div>
Похоже, вам следует переименовать свой класс item в carousel-item.