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> 

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! =)


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.


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'

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

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.


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>

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.


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

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!


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

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.