为什么我的三元运算符不在 ERB 中的类上工作以将图像从数据库加载到引导轮播

Question

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

<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>

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