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> 

Відповіді:


137

привіт, ти можеш спробувати зробити це

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, наприклад клас, 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>тегу
Вездесущий

це насправді одне і те ж поняття, тому вам потрібно знайти способи втиснути і image_tag, і інтервал у параметр "name". ви можете спробувати це, а не повний код, але я думаю, ви можете зробити це самостійно =) = link_to "# {image_tag} <span> Шукати </span>", ... ви можете побачити, що я намагаюся зробити?
Staelen

ах зрозумів. так, я хотів стиснути його в параметрі name. але не знав про # {}. веселі часи з рейками
Вездесущий

Це може бути корисно для інших: якщо ви просто хочете додати зображення поруч із текстом посилання, ви просто робите <% = link_to image_tag ('image_path') + "text link", the_path%>
Нік Рес

27

Просто додавши, що ви можете передати 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, вас можуть просто переадресувати на адресу.
Jngai1297

Це була найкраща відповідь для мене. Дякую!
newUserName Here

@newUserNameHere Не хвилюйтеся! :)
Starkers

17

Найкращим буде:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'

Це найчистіше рішення.
Raidspec

Найкраще рішення, чисте і без зайвої петлі.
Лукас Андраде,


6

Легко:

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

Перші пари з link_to текст / HTML для посилання (всередині в тезі). Наступний набір параметрів - це властивості 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"%>

Сподіваюся, це допомагає!


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

Поясніть, будь ласка, деякі подробиці щодо нашої відповіді?
Нілеш,

Мої відповіді відображатимуться так: <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 із фоновим зображенням

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.