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.