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> 

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


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.


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'

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

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.


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>

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.


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

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!


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

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.