为什么我的三元运算符不能在 ERB 中使用 class 将图像从数据库加载到 bootstrap 轮播？

Question

我正在尝试将图像加载到 bootstrap 轮播中，图像存储在我的 Ruby rails 应用程序的 PostgreSQL 数据库中。我在前端使用 ERB。下面的代码没有任何显示...我相信它与我的 class 上的三元运算符有关，但我不确定确切的问题是什么....

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
   <% @post.first(3).each do |image, index| %>
    <li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
   <% end %>
 </ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">
 <% @post.first(3).each do |image, index| %>
  <div class="item <%= index == 0 ? 'active' : '' %>">
    <%= link_to image_tag(image.image.url, class:"images") %>
    <div class="">
      <h3><%= index %></h3>
    </div>
  </div>
 <% end %>
</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>

Answer 1

原因是你的三元运算符没有得到 index 来让它工作你需要用 each_with_index 而不是每个

所以这是正确的做法：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
   <% @post.first(3).each_with_index do |image, index| %> <!--use each_with_index -->
    <li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
   <% end %>
 </ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">
 <% @post.first(3).each_with_index do |image, index| %> <!--use each_with_index -->
  <div class="item <%= index == 0 ? 'active' : '' %>">
    <%#= link_to image_tag(image.image.url, class:"images") %> <!--use image_tag -->
    <%=image_tag image.image.url ,class: "images"%>
    <div class="">
      <h3><%= index %></h3>
    </div>
  </div>
 <% end %>
</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>

我刚刚解决了这个问题，如果有图像，它现在应该可以工作了。让我知道以获得进一步的指导。

为什么我的三元运算符不能在 ERB 中使用 class 将图像从数据库加载到 bootstrap 轮播？

Why is my ternary operator not working on a class in ERB to load images from a database to a bootstrap carousel?

postgresql

ruby-on-rails

ternary-operator

twitter-bootstrap

bootstrap-carousel