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.