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.