link_to resim etiketi. bir etikete sınıf nasıl eklenir


90

Aşağıdaki gibi link_to img etiketi kullanıyorum

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

Hangi html'nin izlenmesiyle sonuçlanır?

<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" öğesinin <a>img etiketi yerine etikete gitmesini istiyorum .

Bunu nasıl değiştirebilirim?

Güncelleme:

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

sonuçlanır

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

Yanıtlar:


137

merhaba bunu yapmayı deneyebilirsin

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

ya da

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

küme parantezlerinin konumunun çok önemli olduğunu unutmayın, çünkü bunları kaçırırsanız, raylar tek bir hash parametresi oluşturduklarını varsayacaktır (bununla ilgili daha fazla bilgiyi burada okuyun )

ve link_to için api'ye göre :

link_to(name, options = {}, html_options = nil)
  1. ilk parametre gösterilecek dizedir (veya bir image_tag de olabilir)
  2. ikincisi, bağlantının url'sinin parametresidir
  3. son öğe, html etiketini bildirmek için isteğe bağlı parametredir, örneğin sınıf, onchange, vb.

Umarım yardımcı olur! =)


Detaylı cevap için teşekkürler. Cevabınızı kabul edeceğim, ancak bunu link_to etiketiyle de nasıl başaracağınızı biliyorsanız bana bildirin .. <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>Kapanış <a>etiketinden önce bir span etiketi ekledim
Omnipresent

aslında aynı kavramdır, dolayısıyla hem image_tag'i hem de aralığı "name" parametresine sıkıştırmanın yollarını bulmanız gerekir. bunu deneyebilirsiniz, kodun tamamını değil, ancak kendiniz yapabileceğinizi düşünüyorum =) = link_to "# {image_tag} <span> Ara </span>", ... ne yapmaya çalıştığımı görebiliyor musunuz?
Staelen

ah anladım. evet bunu isim parametresinde sıkıştırmak istedim. ancak # {} farkında değildi. raylarla eğlenceli zamanlar
Omnipresent

Bu başkaları için yararlı olabilir: Bağlantı metninin yanına bir resim eklemek istiyorsanız, <% = link_to image_tag ('image_path') + "link text", the_path%>
Nick Res

28

Sadece link_toyöntemi bir blok geçirebileceğinizi ekleyerek :

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

sonuçlanır:

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

Tasarımcı bana fantezi css3 devrilme efektleriyle karmaşık bağlantılar verdiğinde bu bir hayat kurtarıcı oldu.


Bağlantıdan önce gelen fazladan şeylere ihtiyacım yoktu. Href'den kurtulursanız, sadece url'ye yönlendirilebilirsiniz.
Jngai1297

Bu benim için en iyi cevaptı. Teşekkürler!
newUserNameHere

@newUserNameHere Endişelenmeyin! :)
Starkers

17

En iyisi:

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

Bu en temiz çözümdür.
Raidspec

En iyi çözüm, temiz ve gereksiz döngü olmadan.
Lucas Andrade

9

bu benim çözümüm:

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

6

Kolay:

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

Link_to'nun ilk parametresi, bağlanacak metin / html'dir ( bir etiketin içinde). Bir sonraki parametre kümesi, url özellikleri ve bağlantı özelliklerinin kendisidir.


Bunu denedim ama oraya eklemek onu dize için bir parametre yapar. lütfen güncellememe bakın
Omnipresent

Evet, ikinci parametrenin url olduğunu bile yazdım, ama sonra sebepsiz yere sildim: P
Toby Hede

2

Güncellenen sorunuza yanıt vermek için, http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Daha eski argüman stilini kullanırken dikkatli olun, çünkü fazladan bir literal hash gerekli:

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

Hash'i kapalı bırakmak yanlış bağlantıyı veriyor:

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

2

Bütün :action =>, :controller =>ben çok etrafında gördüğüm benim için biraz işe yaramadı.

Kazmak için saatler harcadım ve bu yöntem kesinlikle benim için bir döngüde çalıştı.

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

Ruby on Rails, image_tag ile link_to kullanarak

Ayrıca, Rails 4 kullanıyorum.


1

Bunu da denedim ve çok iyi çalışıyor:

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

Hey millet, bu, resimle bağlantı kurmanın iyi bir yoludur ve css özniteliğini değiştirmek isterseniz, örneğin "alt" veya "başlık" vb. Yerine mantıksal bir kısıtlama (?)

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

Bu yardımcı olur umarım!


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

Cevabımızla ilgili bazı ayrıntıları açıklar mısınız?
Nilesh

Yanıtlarım şu şekilde çıktı gösterecek: <a href="https://stackoverflow.com/pages/search"> <img alt = "Ara" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Ara </span> </a>
Vivek Kapoor

0

Bunu da deneyebilirsin

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

"Metas-logo", arka plan resmine sahip bir css sınıfıdır

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.