link_to图片标记。如何将类添加到标记

时间:2010-01-22 05:21:21

标签: ruby-on-rails

我正在使用link_to img标签,如下面的

<%= link_to image_tag("Search.png", :border=>0, :class => 'dock-item'), 
:action => 'search', :controller => 'pages'%><span>Search</span></a>

这导致以下html

<a href="/pages/search"><img alt="Search" border="0" class="dock-item" 
src="/images/Search.png?1264132800" /></a><span>Search</span></a> 

我希望class =“dock-item”转到<a>标记而不是img标记。

我该如何改变?

更新

<%= link_to image_tag("Search.png", :border=>0), :action => 'search', 
:controller => 'pages', :class => 'dock-item' %>

结果

<a href="/pages/search?class=dock-item"><img alt="Search" border="0" 
src="/images/Search.png?1264132800" /></a> 

11 个答案:

答案 0 :(得分:132)

嗨,你可以尝试这样做

link_to image_tag("Search.png", border: 0), {action: 'search', controller: 'pages'}, {class: 'dock-item'}

甚至

link_to image_tag("Search.png", border: 0), {action: 'search', controller: 'pages'}, class: 'dock-item'

请注意,花括号的位置非常重要,因为如果你错过了它们,rails会假设它们形成一个哈希参数(详细了解这个here

并根据api for link_to

link_to(name, options = {}, html_options = nil)
  1. 第一个参数是要显示的字符串(或者它也可以是image_tag)
  2. 第二个是链接网址的参数
  3. 最后一项是用于声明html标记的可选参数,例如class,onchange等。
  4. 希望它有所帮助! =)

答案 1 :(得分:27)

只需添加一个块即可传递link_to方法:

<%= link_to href: 'http://www.example.com/' do %>
    <%= image_tag 'happyface.png', width: 136, height: 67, alt: 'a face that is unnervingly happy'%>
<% end %>

导致:

<a href="/?href=http%3A%2F%2Fhttp://www.example.com/k%2F">
    <img alt="a face that is unnervingly happy" height="67" src="/assets/happyface.png" width="136">
</a>

当设计师给我复杂的链接以及奇特的css3翻转效果时,这已经成为一种生命保护。

答案 2 :(得分:18)

最好的将是:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'

答案 3 :(得分:9)

这是我的解决方案:

<%= link_to root_path do %>
   <%= image_tag "image.jpg", class: "some class here" %>
<% end %>

答案 4 :(得分:6)

易:

<%= link_to image_tag("Search.png", :border=>0), :action => 'search', :controller => 'pages', :class => 'dock-item' %>

link_to 的第一个参数是要链接的文字/ html(在 a 标记内)。下一组参数是url属性和链接属性本身。

答案 5 :(得分:2)

根据http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

回复您更新的问题

使用旧的参数样式时要小心,因为需要额外的文字哈希:

  link_to "Articles", { :controller => "articles" }, :id => "news", :class => "article"
  # => <a href="/articles" class="article" id="news">Articles</a>

关闭散列会给出错误的链接:

  link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
  # => <a href="/articles/index/news?class=article">WRONG!</a>

答案 6 :(得分:2)

我经常看到的整个:action =>, :controller =>位对我来说不起作用。

花了几个小时挖掘这个方法肯定对我有用。

<%=link_to( image_tag(participant.user.profile_pic.url(:small)), user_path(participant.user), :class=>"work") %>

Ruby on Rails using link_to with image_tag

另外,我正在使用Rails 4.

答案 7 :(得分:1)

我也试过了,效果很好:

      <%= link_to home_index_path do %>
      <div class='logo-container'>
        <div class='logo'>
          <%= image_tag('bar.ico') %>
        </div>
        <div class='brand' style='font-size: large;'>
          .BAR
        </div>
      </div>
      <% end %>

答案 8 :(得分:0)

嘿伙计这是链接w /图像的好方法,并且有很多道具以防你想要css属性例如替换“alt”或“title”等.....还包括一个逻辑限制(? )

<%= link_to image_tag("#{request.ssl? ? @image_domain_secure : @image_domain}/images/linkImage.png", {:alt=>"Alt title", :title=>"Link title"}) , "http://www.site.com"%>

希望这有帮助!

答案 9 :(得分:0)

<%= link_to root_path do %><%= image_tag("Search.png",:alt=>'Vivek',:title=>'Vivek',:class=>'dock-item')%><%= content_tag(:span, "Search").html_safe%><% end %>

答案 10 :(得分:0)

你也可以尝试这个

<li><%= link_to "", application_welcome_path, class: "navbar-brand metas-logo"    %></li>

其中“metas-logo”是带有背景图像的css类

相关问题