link_to画像タグ。タグにクラスを追加する方法


90

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

回答:


137

こんにちは、これをやってみることができます

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'

中括弧の位置は非常に重要であることに注意してください。見逃した場合、レールはそれらが単一のハッシュパラメーターを形成すると想定するためです(詳細はこちら)。

link_toAPIによると:

link_to(name, options = {}, html_options = nil)
  1. 最初のパラメータは表示する文字列です(または、image_tagにすることもできます)
  2. 2番目は、リンクのURLのパラメーターです
  3. 最後の項目は、htmlタグを宣言するためのオプションのパラメーターです(例:class、onchangeなど)。

それが役に立てば幸い!=)


詳細な回答ありがとうございます。私はあなたの答えを受け入れるが、..あなたが同様のlink_toタグでこれを達成する方法を知っているなら、私は知ってもらおう<a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>私が閉じる前に、spanタグを追加した<a>タグを
遍在

これは実際には同じ概念なので、image_tagとスパンの両方をパラメーター "name"に圧縮する方法を見つける必要があります。完全なコードではなく、これを試すことができますが、自分でできると思います=)= link_to "#{image_tag} <span>検索</ span>"、...私がやろうとしていることがわかりますか?
Staelen、2010年

わかった。ええ、私はそれを名前パラメーターで絞りたいと思っていました。#{}を認識していませんでした。レールのある楽しい時間
2010年

これは他の人に役立つかもしれません:リンクのテキストの横に画像を追加したいだけの場合は、<%= link_to image_tag( 'image_path')+ "link text"、the_path%>
Nick Res

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ロールオーバー効果との複雑なリンクを与えたときの命の恩人でした。


リンクの前にある余分なものは必要ありませんでした。あなたがhrefを取り除くなら、あなたはそのURLに直接導かれることができます。
Jngai1297 2014

これは私にとって最良の答えでした。ありがとう!
newUserNameHere 14

@newUserNameHere心配いりません!:)
スターカーズ

17

ベストは:

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

これは最もクリーンなソリューションです。
Raidspec

クリーンで不要なループのない最良のソリューション。
Lucas Andrade


6

簡単:

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

link_toの最初のパラメーターは、リンクするtext / htmlです(aタグ内)。次のパラメータセットは、urlプロパティとリンク属性自体です。


私はそれを試しましたが、そこに追加すると、文字列のパラメータになります。私の更新を参照してください
遍在

ええ、私は2番目のパラメータがURLであると書いていましたが、理由もなくそれを削除しました:P
Toby Hede

2

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.htmlによると、更新された質問に応答するには...

追加のリテラルハッシュが必要になるため、古い引数スタイルを使用するときは注意してください。

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

ハッシュをオフにすると、間違ったリンクが表示されます。

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

2

全体 :action =>, :controller =>たくさん見たもののが私には役に立たなかった。

何時間も掘るのにこの方法は間違いなくループ内でうまくいきました。

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

image_tagでlink_toを使用するRuby on Rails

また、私はRails 4を使用しています。


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

0

こんにちはこれは画像とのリンクの良い方法であり、たとえば「alt」や「title」などをCSS属性に置き換えたい場合に備えて多くの小道具があります....論理的な制限も含まれています(?)

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

お役に立てれば!


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

私たちの答えについていくつかの詳細を説明していただけますか?
Nilesh 2014

私のansは次のような出力を表示します:<a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png?1264132800" /> </a> <span>検索</ span> </a>
Vivek Kapoor

0

これも試すことができます

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

ここで、「metas-logo」は背景画像のあるcssクラスです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.