link_to image tag. cara menambahkan kelas ke tag

90

Saya menggunakan tag link_to img seperti berikut

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

Yang menghasilkan html berikut

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

Saya ingin class = "dock-item" ditempatkan ke <a>tag, bukan ke tag img.

Bagaimana cara mengubah ini?

Memperbarui:

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

menghasilkan

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

Jawaban:

137

hai kamu bisa mencoba melakukan ini

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

atau bahkan

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

perhatikan bahwa posisi kurung kurawal sangat penting, karena jika Anda melewatkannya, rel akan menganggapnya membentuk parameter hash tunggal (baca lebih lanjut tentang ini di sini )

dan menurut api untuk link_to :

link_to(name, options = {}, html_options = nil)
  1. parameter pertama adalah string yang akan ditampilkan (atau bisa juga berupa image_tag)
  2. yang kedua adalah parameter untuk url tautan
  3. item terakhir adalah parameter opsional untuk mendeklarasikan tag html, misalnya class, onchange, dll.

semoga membantu! =)

Staelen
sumber
Terima kasih atas jawaban mendetailnya. Saya akan menerima jawaban Anda tetapi beri tahu saya jika Anda tahu cara melakukannya dengan tag link_to juga .. <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>Saya telah menambahkan tag rentang sebelum <a>tag penutup
Omnipresent
sebenarnya konsepnya sama, jadi Anda perlu menemukan cara untuk memadatkan image_tag dan span ke dalam parameter "name". Anda dapat mencoba ini, bukan kode lengkapnya tetapi saya rasa Anda dapat melakukannya sendiri =) = link_to "# {image_tag} <span> Penelusuran </span>", ... dapatkah Anda melihat apa yang saya coba lakukan?
Staelen
ah mengerti. ya saya ingin meremasnya di parameter nama. tapi tidak menyadari # {}. saat-saat menyenangkan dengan rel
Omnipresent
Ini mungkin berguna bagi orang lain: Jika Anda hanya ingin menambahkan gambar di sebelah teks tautan, Anda cukup melakukan <% = link_to image_tag ('image_path') + "teks tautan", the_path%>
Nick Res
28

Hanya menambahkan bahwa Anda dapat melewatkan link_tometode satu blok:

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

menghasilkan:

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

Ini telah menjadi penyelamat hidup ketika desainer telah memberi saya tautan kompleks dengan efek roll-over css3 yang mewah.

Starkers
sumber
Saya tidak membutuhkan barang ekstra yang ada sebelum tautan. Jika Anda menghilangkan href, Anda hanya bisa diarahkan ke url.
Jngai1297
Ini adalah jawaban terbaik untuk saya. Terima kasih!
newUserNameHere
@newUserNameHere Jangan khawatir! :)
Starkers
17

Yang terbaik adalah:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'
Ravinesh
sumber
Ini adalah solusi terbersih.
Raidspec
Solusi terbaik, bersih dan tanpa loop yang tidak perlu.
Lucas Andrade
9

ini solusi saya:

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

Mudah:

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

Param pertama link_to adalah text / html-link (dalam sebuah tag). Kumpulan parameter berikutnya adalah properti url dan atribut tautan itu sendiri.

Toby Hede
sumber
Saya telah mencobanya tetapi menambahkannya di sana menjadikannya parameter untuk string. silakan lihat pembaruan saya
Omnipresent
Ya, saya bahkan menulis bahwa parameter kedua adalah url, tetapi kemudian menghapusnya tanpa alasan: P
Toby Hede
2

Untuk menanggapi pertanyaan terbaru Anda, menurut http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Hati-hati saat menggunakan gaya argumen yang lebih lama, karena diperlukan hash literal tambahan:

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

Meninggalkan hash memberikan link yang salah:

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

Keseluruhan :action =>, :controller => yang sering saya lihat tidak berhasil untuk saya.

Menghabiskan waktu berjam-jam untuk menggali dan metode ini pasti berhasil untuk saya dalam satu lingkaran.

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

Ruby on Rails menggunakan link_to dengan image_tag

Juga, saya menggunakan Rails 4.

vandoona
sumber
1

Saya mencoba ini juga, dan bekerja dengan sangat baik:

      <%= 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 %>
Daniel Guzmán
sumber
0

Hai teman-teman, ini adalah cara yang baik untuk menautkan dengan gambar dan memiliki banyak props jika Anda ingin atribut css misalnya mengganti "alt" atau "judul" dll ..... juga termasuk batasan logis (?)

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

Semoga ini membantu!

d1jhoni1b
sumber
0
<%= link_to root_path do %><%= image_tag("Search.png",:alt=>'Vivek',:title=>'Vivek',:class=>'dock-item')%><%= content_tag(:span, "Search").html_safe%><% end %>
Vivek Kapoor
sumber
Maukah Anda menjelaskan beberapa detail tentang jawaban kami?
Nilesh
Jawaban saya akan menampilkan keluaran seperti ini: <a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Penelusuran </span> </a>
Vivek Kapoor
0

Anda juga bisa mencobanya

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

Dimana "metas-logo" adalah kelas css dengan gambar latar belakang

ksan
sumber