link_to image tag. So fügen Sie einem Tag eine Klasse hinzu

90

Ich benutze das link_to img Tag wie folgt

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

Was zu folgendem HTML führt

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

Ich möchte, dass die class = "dock-item" <a>anstelle des img-Tags zum Tag wechselt.

Wie kann ich das ändern?

Aktualisieren:

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

führt zu

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

Antworten:

137

Hallo, du kannst es versuchen

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

oder auch

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

Beachten Sie, dass die Position der geschweiften Klammern ist sehr wichtig, denn wenn man sie verpassen, Schienen sie einen einzigen Hash - Parameter (lesen Sie mehr über diese Form wird nehmen hier )

und laut api für link_to :

link_to(name, options = {}, html_options = nil)
  1. Der erste Parameter ist die anzuzeigende Zeichenfolge (oder es kann sich auch um einen image_tag handeln).
  2. Der zweite ist der Parameter für die URL des Links
  3. Das letzte Element ist der optionale Parameter zum Deklarieren des HTML-Tags, z. B. class, onchange usw.

ich hoffe es hilft! =)

Staelen
quelle
Danke für die ausführliche Antwort. Ich werde Ihre Antwort akzeptieren, aber lassen Sie mich wissen, ob Sie wissen, wie dies auch mit dem link_to-Tag erreicht werden kann. <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>Ich habe vor dem Schließen des <a>Tags ein span-Tag hinzugefügt
Omnipresent
Es ist eigentlich das gleiche Konzept, daher müssen Sie Wege finden, um sowohl den image_tag als auch den span in den Parameter "name" zu drücken. Sie können dies versuchen, nicht den vollständigen Code, aber ich denke, Sie können es selbst tun =) = link_to "# {image_tag} <span> Search </ span>", ... können Sie sehen, was ich versuche zu tun?
Staelen
Ich habe es verstanden. Ja, ich wollte es in Name Parameter drücken. war sich aber # {} nicht bewusst. lustige Zeiten mit Schienen
Allgegenwärtig
Dies kann für andere hilfreich sein: Wenn Sie nur ein Bild neben dem Linktext hinzufügen möchten, tun Sie einfach <% = link_to image_tag ('image_path') + "link text", the_path%>
Nick Res
27

Fügen Sie einfach hinzu, dass Sie der link_toMethode einen Block übergeben können:

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

Ergebnisse in:

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

Dies war ein Lebensretter, als der Designer mir komplexe Verknüpfungen mit ausgefallenen CSS3-Rollover-Effekten gegeben hat.

Starkers
quelle
Ich brauchte nicht das zusätzliche Zeug, das vor dem Link kommt. Wenn Sie href loswerden, können Sie einfach auf die URL geleitet werden.
Jngai1297
Dies war die beste Antwort für mich. Vielen Dank!
newUserNameHere
@newUserNameHere Keine Sorge! :)
Starkers
17

Das Beste wird sein:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'
Ravinesh
quelle
Dies ist die sauberste Lösung.
Raidspec
Die beste Lösung, sauber und ohne unnötige Schleife.
Lucas Andrade
9

Das ist meine Lösung:

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

Einfach:

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

Der erste Parameter von link_to ist der zu verknüpfende Text / HTML- Code (innerhalb des a- Tags). Der nächste Parametersatz sind die URL-Eigenschaften und die Link-Attribute selbst.

Toby Hede
quelle
Ich hatte das versucht, aber wenn ich es dort hinzufüge, ist es ein Parameter für die Zeichenfolge. Bitte sehen Sie mein Update
Allgegenwärtig
Ja, ich habe sogar geschrieben, dass der zweite Parameter die URL ist, habe sie dann aber ohne Grund gelöscht: P
Toby Hede
2

Um auf Ihre aktualisierte Frage zu antworten, laut http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Seien Sie vorsichtig, wenn Sie den älteren Argumentationsstil verwenden, da ein zusätzlicher wörtlicher Hash erforderlich ist:

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

Wenn Sie den Hash weglassen, erhalten Sie den falschen Link:

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

Das ganze :action =>, :controller =>Stück, das ich viel gesehen habe, hat bei mir nicht funktioniert.

Verbrachte Stunden mit Graben und diese Methode funktionierte definitiv für mich in einer Schleife.

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

Ruby on Rails mit link_to mit image_tag

Außerdem benutze ich Rails 4.

Vandoona
quelle
1

Ich habe es auch versucht und funktioniert sehr gut:

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

Hey Leute, dies ist eine gute Art der Verknüpfung mit Bild und hat viele Requisiten für den Fall, dass Sie das CSS-Attribut ersetzen möchten, zum Beispiel "alt" oder "title" usw. ..... auch mit einer logischen Einschränkung (?)

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

Hoffe das hilft!

d1jhoni1b
quelle
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
quelle
Erklären Sie bitte einige Details zu unserer Antwort.
Nilesh
Meine Ans zeigt die folgende Ausgabe an: <a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Suche </ span> </a>
Vivek Kapoor
0

Sie können dies auch versuchen

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

Wobei "metas-logo" eine CSS-Klasse mit einem Hintergrundbild ist

ksan
quelle