Question

我要在carousel-twitter引导程序中显示超过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>

上面的html代码是在carousel中显示一个图像。同样，对于其他图像，我们必须使用另一个图像的名称再次编写相同的代码。我的问题是这个我们如何在ruby中编写用于显示多个图像的代码。我尝试使用像

这样的数组

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

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

我是初学者，请尽可能解释一下代码。

Answer 1

看起来你的代码在正确的轨道上：

控制器：

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

查看：

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

您可能希望分配一个哈希数组，以便可以存储图像文件名之外的其他信息，例如：

控制器：

@images = [

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

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

]

查看：

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

  <%= image_tag(

    image[ 'file' ], :size => '600x400', :alt => image[ 'alt' ]

  ) %>

<% end %>

Answer 2

我通常会在“资产/图片”文件夹中加载所有轮播图片，其中包含＆＃39; c＆＃39;以他们的名字命名的字母。（例如towerc.jpg）。可以加载任意多个。
假设第一张图片是welcome.jpg（因为通常是图像/文字的组合。至少在我的情况下）。
加载一个变量（在我的情况下是@pics），包含文件夹中的所有合格照片）
在视图中浏览数组以显示图像。

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

<!--  file names ending with c.(jpg,png,gif,jpeg) are carousel only-->
<!--  welcome.jpg is first active file, usually something special.-->

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

用于在旋转木马中显示许多图像的ruby代码

2 个答案: