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'

중괄호를 놓치면 레일이 단일 해시 매개 변수를 형성한다고 가정하기 때문에 중괄호의 위치는 매우 중요합니다 ( 여기에서 자세히 알아보기 ).

그리고 link_to 에 대한 api 에 따르면 :

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>태그
편재

실제로 동일한 개념이므로 image_tag와 범위를 매개 변수 "name"으로 압축하는 방법을 찾아야합니다. 전체 코드가 아닌이 작업을 시도해 볼 수 있지만 직접 할 수 있다고 생각합니다 =) = link_to "# {image_tag} <span> 검색 </ span>", ... 내가 뭘 하려는지 알 수 있나요?
Staelen 2010-01-22

아 알았다. 네, 이름 매개 변수로 짜내고 싶었습니다. 하지만 # {}을 인식하지 못했습니다. 레일로 즐거운 시간
Omnipresent

이것은 다른 사람들에게 도움이 될 수 있습니다. 링크의 텍스트 옆에 이미지를 추가하고 싶다면 <% = link_to image_tag ( 'image_path') + "link text", the_path %>
Nick Res

28

추가하면 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 dec.

@newUserNameHere 걱정 마세요! :)
Starkers 2014

17

최고는 :

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

이것이 가장 깨끗한 솔루션입니다.
Raidspec

최상의 솔루션, 깨끗하고 불필요한 루프가 없습니다.
Lucas Andrade

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 속성과 링크 속성 자체입니다.


나는 그것을 시도했지만 거기에 추가하면 문자열에 대한 매개 변수가됩니다. 내 업데이트를 참조하십시오
Omnipresent

그래, 난 두 번째 PARAM가 URL이라고 썼다, 그러나 아무 이유없이이를 삭제 : P
토비 HEDE

2

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html 에 따라 업데이트 된 질문에 응답하려면 ...

추가 리터럴 해시가 필요하므로 이전 인수 스타일을 사용할 때는주의해야합니다.

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

해시를 해제하면 잘못된 링크가 제공됩니다.

  link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
  # => <a href="/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") %>

link_to와 image_tag를 사용하는 Ruby on Rails

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

Hey guys 이것은 이미지가있는 링크의 좋은 방법이며 예를 들어 "alt"또는 "title"등을 대체하는 CSS 속성을 원하는 경우 많은 props를 가지고 있습니다. ... 논리적 제한 (?)도 포함합니다.

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

우리의 답변에 대해 자세히 설명해 주시겠습니까?
Nilesh

내 ans는 다음과 같은 출력을 표시합니다. <a href="https://stackoverflow.com/pages/search"> <img alt = "Search"border = "0"class = "dock-item"src = "/ images / Search.png? 1264132800" /> </a> <span> 검색 </ span> </a>
Vivek Kapoor 2014 년

0

당신은 또한 이것을 시도 할 수 있습니다

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

여기서 "metas-logo"는 배경 이미지가있는 CSS 클래스입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.