Ruby on rails 用于在旋转木马中显示多个图像的ruby代码

我必须在旋转木马推特引导中显示30多个图像。所以我写了上面提到的代码。显示一幅图像的代码如下所示：

<div id="carousel" class="carousel">
  <div class="carousel-inner">  
    <div class="item active">
      <%= image_tag('1.JPG',:size => '600x400', :alt => "College Building") %>
    <div class="carousel-caption"></div>
  </div> 
</div>

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

‘600x400’，：alt=>“学院大楼”）%>

上面的html代码用于在旋转木马中显示一个图像。类似地，对于其他图像，我们必须使用另一个图像的名称再次编写相同的代码。我的问题是 如何用ruby编写显示多个图像的代码。我尝试过使用类似数组的方法

# in controller
@image["1.jpg","2.jpg",...] 
@image.each do|n|

# in HTML page
<%=image_tag("n",:size => '600x400')%> 

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

控制器中的

#
@图像[“1.jpg”、“2.jpg”，…]
@image.每个do | n|
#在HTML页面中
“600x400”）%%>

---

我是初学者，因此如果可能，请解释代码。

看起来您的代码是正确的：

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

控制器：

# You have to assign the array to the @images variable
@images = [ "1.jpg", "2.jpg", ... ]

@images = [

  { 'file' => "1.jpg", 'alt' => "College Building" },

  { 'file' => "2.jpg", 'alt' => "Something else" }

]

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

视图：

<% @images.each do |n| %>

  <%

  # You have to use the `n` variable, not the literal
  # string "n" that you used in your sample code. Notice
  # the lack of quotes here:

  %>

  <%= image_tag( n, :size => '600x400' ) %> 

<% end %>

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

视图：

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

'600x400'，：alt=>image['alt']
) %>

我通常会将所有旋转木马图片加载到assets/images文件夹中，并在其名称的末尾添加一个“c”字母。（例如towerc.jpg）。可以加载任意数量的文件

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

假设第一个图像是welcome.jpg（因为通常是图像/文本的组合，至少在我的例子中是这样）

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

加载一个变量（在我的例子中为@pics），将所有符合条件的pics从文件夹中取出）

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

浏览视图中的数组以显示图像

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

别忘了玩高度和宽度（xxx，yyy）

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

“xxx”，高度=>“yyy”）%>
“xxx”，高度=>“yyy”）%>

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

---

顺便说一句，JMM解决方案应该是可行的，只是试图强调您应该将图像存储在assets/images文件夹中并从那里获取它们。

嘿，非常感谢。我使用了你的方法，但不幸地得到了这个错误“nil:NilClass的未定义方法'each'”所以我添加了if@images“就在这个'600x400'之前，：alt=>image['alt']]）%>。现在没有任何错误，但图像仍然没有显示在旋转木马中。请留意一下。。！！嗯，一定是出了什么事。确保两个位置的变量名相同，例如

@images

。您可以将其放在视图中以确保具有正确的值：

。当您到达显示正确值的点时，

每个

都应该工作。

    <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>