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> 

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


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.


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'

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

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.


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>

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.


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

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!


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

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.