tag obrazu link_to. jak dodać klasę do tagu

90

Używam tagu link_to img, jak poniżej

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

Co powoduje następujące html

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

Chcę, aby class = "dock-item" trafiało do <a>tagu zamiast do tagu img.

Jak mogę to zmienić?

Aktualizacja:

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

prowadzi do

<a href="/pages/search?class=dock-item"><img alt="Search" border="0" 
src="/images/Search.png?1264132800" /></a> 
Wszechobecny
źródło

Odpowiedzi:

137

cześć, możesz spróbować to zrobić

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

lub nawet

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

zwróć uwagę, że pozycja nawiasów klamrowych jest bardzo ważna, ponieważ jeśli je przegapisz, szyny przyjmą, że tworzą pojedynczy parametr hash (więcej o tym tutaj )

i zgodnie z API dla link_to :

link_to(name, options = {}, html_options = nil)
  1. pierwszym parametrem jest ciąg znaków do wyświetlenia (lub może to być również image_tag)
  2. drugi to parametr adresu URL linku
  3. ostatnia pozycja to opcjonalny parametr do zadeklarowania tagu html, np. class, onchange itp.

mam nadzieję, że to pomoże! =)

Staelen
źródło
Dzięki za szczegółową odpowiedź. Przyjmę twoją odpowiedź, ale daj mi znać, jeśli wiesz, jak to osiągnąć za pomocą tagu link_to. <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>Dodałem tag span przed <a>tagiem zamykającym
Omnipresent
jest to właściwie ta sama koncepcja, więc musisz znaleźć sposoby na wciśnięcie zarówno image_tag, jak i zakresu do parametru „nazwa”. możesz spróbować tego, a nie pełnego kodu, ale myślę, że możesz to zrobić samodzielnie =) = link_to "# {image_tag} <span> Szukaj </span>", ... czy widzisz, co próbuję zrobić?
Staelen
Ach, rozumiem. tak, chciałem wcisnąć to w parametr nazwy. ale nie był świadomy # {}. zabawne czasy z szynami
wszechobecny
To może być pomocne dla innych: Jeśli chcesz tylko dodać obraz obok tekstu linku, po prostu wykonaj <% = link_to image_tag ('image_path') + "link text", the_path%>
Nick Res
28

Dodam tylko, że możesz przekazać link_tometodzie 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 %>

prowadzi do:

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

To uratowało mi życie, gdy projektant dał mi złożone linki z fantazyjnymi efektami roll-over css3.

Starkers
źródło
Nie potrzebowałem dodatkowych rzeczy, które pojawiają się przed linkiem. Jeśli pozbędziesz się href, możesz po prostu zostać skierowany do adresu URL.
Jngai1297
To była dla mnie najlepsza odpowiedź. Dzięki!
newUserNameHere
@newUserNameHere Nie martw się! :)
Starkers
17

Najlepszy będzie:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'
Ravinesh
źródło
To najczystsze rozwiązanie.
Raidspec
Najlepsze rozwiązanie, czyste i bez zbędnej pętli.
Lucas Andrade
9

to jest moje rozwiązanie:

<%= link_to root_path do %>
   <%= image_tag "image.jpg", class: "some class here" %>
<% end %>
Jack Daniel
źródło
6

Łatwy:

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

Pierwszym parametrem link_to jest tekst / html do linku (wewnątrz tagu a ). Kolejny zestaw parametrów to właściwości adresu URL i same atrybuty odsyłaczy.

Toby Hede
źródło
Próbowałem tego, ale dodanie go tam sprawia, że ​​jest to parametr dla ciągu. proszę zobaczyć moją aktualizację
Omnipresent
Tak, nawet napisałem, że drugim parametrem jest adres URL, ale potem usunąłem go bez powodu: P
Toby Hede
2

Aby odpowiedzieć na zaktualizowane pytanie, zgodnie z http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Zachowaj ostrożność, używając starszego stylu argumentów, ponieważ potrzebny jest dodatkowy literał skrótu:

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

Pozostawienie wyłączonego skrótu daje zły link:

  link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
  # => <a href="/articles/index/news?class=article">WRONG!</a>
Randy Simon
źródło
2

Cały :action =>, :controller =>fragment, który często widziałem, nie działał dla mnie.

Spędziłem godziny na kopaniu i ta metoda zdecydowanie zadziałała dla mnie w pętli.

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

Ruby on Rails używając link_to z image_tag

Ponadto używam Rails 4.

vandoona
źródło
1

Ja też tego próbowałem i działa bardzo dobrze:

      <%= 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
źródło
0

Hej, to dobry sposób na link z obrazem i ma wiele rekwizytów na wypadek, gdybyś chciał zastąpić atrybut css, na przykład "alt" lub "tytuł" itp ..... także z logicznym ograniczeniem (?)

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

Mam nadzieję że to pomoże!

d1jhoni1b
źródło
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
źródło
Czy może Pan wyjaśnić kilka szczegółów naszej odpowiedzi?
Nilesh
Moje odpowiedzi pokażą następujące wyniki: <a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Szukaj </span> </a>
Vivek Kapoor
0

Możesz także spróbować tego

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

Gdzie „metas-logo” to klasa css z obrazem tła

ksan
źródło