1

我必须在轮播推特引导程序中显示 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 代码是在轮播中显示一张图片。同样，对于其他图像，我们必须使用其他图像的名称再次编写相同的代码。我的问题是我们如何在 ruby​​ 中编写代码来显示多个图像。我试过使用像这样的数组

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

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

我是初学者，所以请尽可能解释代码。

4

2 回答 2

2

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

控制器：

# 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 %>
于 2012-08-04T22:43:39.353 回答
0

  1. 我通常将所有轮播图片加载到 assets/images 文件夹中，并以“c”字母结尾。（例如，towerc.jpg）。可以根据需要加载任意数量。

  2. 假设第一个图像是welcome.jpg（因为通常是组合图像/文本。至少在我的情况下）。

  3. 加载一个变量（在我的情况下为@pics），其中包含文件夹中所有符合条件的图片）

  4. 在视图中遍历数组以显示图像。

  5. 不要忘记使用高度和宽度#'s (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>

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

于 2012-08-07T17:53:25.633 回答