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.