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

Question

我试图在我的Ruby on rails app上将图像存储在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>

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