link_to тег изображения. как добавить класс к тегу

90

Я использую тег link_to img, как показано ниже

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

Что приводит к следующему html

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

Я хочу, чтобы class = "dock-item" переходил к <a>тегу вместо тега img.

Как я могу это изменить?

Обновить:

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

приводит к

<a href="/pages/search?class=dock-item"><img alt="Search" border="0" 
src="/images/Search.png?1264132800" /></a> 
Вездесущий
источник

Ответы:

138

привет ты можешь попробовать сделать это

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

или даже

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

обратите внимание, что положение фигурных скобок очень важно, потому что, если вы пропустите их, рельсы будут считать, что они образуют один хэш-параметры (подробнее об этом здесь )

и согласно api для link_to :

link_to(name, options = {}, html_options = nil)
  1. первый параметр - это строка, которая будет отображаться (или это также может быть image_tag)
  2. второй - параметр для url ссылки
  3. последний элемент - это необязательный параметр для объявления тега html, например class, onchange и т. д.

Надеюсь, поможет! знак равно

Стэлен
источник
Спасибо за подробный ответ. Я приму ваш ответ, но дайте мне знать, если вы знаете, как этого добиться с помощью тега 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>Я добавил тег span перед закрывающим <a>тегом
Omnipresent
на самом деле это та же концепция, поэтому вам нужно найти способы сжать и image_tag, и диапазон в параметре "name". вы можете попробовать это, а не полный код, но я думаю, вы можете сделать это сами =) = link_to "# {image_tag} <span> Search </span>", ... вы видите, что я пытаюсь сделать?
Staelen
ах понял. да, я хотел втиснуть это в параметр имени. но не знал о # {}. веселые времена с рельсами
Omnipresent
Это может быть полезно другим: если вы просто хотите добавить изображение рядом с текстом ссылки, вы просто набираете <% = link_to image_tag ('image_path') + «текст ссылки», the_path%>
Nick Res
29

Просто добавив, что вы можете передать link_toметоду блок:

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

приводит к:

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

Это спасло мне жизнь, когда дизайнер предоставил мне сложные ссылки с причудливыми эффектами пролистывания CSS3.

Старкерс
источник
Мне не нужны были лишние вещи, которые идут перед ссылкой. Если вы избавитесь от href, вы просто будете перенаправлены на URL-адрес.
Jngai1297
Для меня это был лучший ответ. Благодаря!
newUserNameHere
@newUserNameHere Не беспокойтесь! :)
Starkers
17

Лучшим будет:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'
Равинеш
источник
Это самое чистое решение.
Raidspec
Лучшее решение, чистое и без лишних петель.
Лукас Андраде
9

это мое решение:

<%= link_to root_path do %>
   <%= image_tag "image.jpg", class: "some class here" %>
<% end %>
Джек Дэниел
источник
6

Легко:

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

Первый параметр link_to - это текст / html для ссылки (внутри тега a ). Следующий набор параметров - это свойства url и сами атрибуты ссылки.

Тоби Хеде
источник
Я пробовал это, но добавление его там делает его параметром для строки. пожалуйста, посмотрите мое обновление
Вездесущий
Да, я даже написал, что второй параметр - это url, но потом удалил его без всякой причины: P
Toby Hede
2

Чтобы ответить на ваш обновленный вопрос, согласно http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Будьте осторожны при использовании старого стиля аргументов, поскольку требуется дополнительный буквальный хеш:

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

Если оставить хэш отключенным, будет получена неверная ссылка:

  link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
  # => <a href="https://stackoverflow.com/articles/index/news?class=article">WRONG!</a>
Рэнди Саймон
источник
2

То, :action =>, :controller =>что я много видел, мне не помогло.

Я потратил часы на копание, и этот метод определенно сработал для меня.

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

Ruby on Rails с использованием link_to с image_tag

Также я использую Rails 4.

вандуна
источник
1

Я тоже пробовал это, и работает очень хорошо:

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

Привет, ребята, это хороший способ связи с изображением и имеет много реквизитов на случай, если вы хотите, чтобы атрибут css, например, заменил «alt» или «title» и т. Д. ..... также включая логическое ограничение (?)

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

Надеюсь это поможет!

d1jhoni1b
источник
0
<%= link_to root_path do %><%= image_tag("Search.png",:alt=>'Vivek',:title=>'Vivek',:class=>'dock-item')%><%= content_tag(:span, "Search").html_safe%><% end %>
Вивек Капур
источник
Не могли бы вы объяснить некоторые подробности нашего ответа?
Nilesh
Мой ответ будет выводить такой результат: <a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Поиск </span> </a>
Вивек Капур,
0

Вы также можете попробовать это

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

Где "metas-logo" - это класс css с фоновым изображением.

ксан
источник