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 เช่นคลาส 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>ฉันได้เพิ่มแท็กช่วงก่อนปิด<a>แท็ก
อยู่ทั่วไปทุกหนทุกแห่ง

มันเป็นแนวคิดเดียวกันดังนั้นคุณต้องหาวิธีบีบทั้ง image_tag และ span ลงในพารามิเตอร์ "name" คุณสามารถลองสิ่งนี้ไม่ใช่โค้ดแบบเต็ม แต่ฉันคิดว่าคุณสามารถทำได้เอง =) = link_to "# {image_tag} <span> ค้นหา </span>", ... คุณเห็นสิ่งที่ฉันกำลังพยายามทำอยู่ไหม
Staelen

อาเข้าใจแล้ว ใช่ฉันต้องการบีบมันในพารามิเตอร์ชื่อ แต่ไม่ทราบถึง # {} ครั้งสนุกสนานกับราง
อยู่ทั่วไปทุกหนทุกแห่ง

สิ่งนี้อาจเป็นประโยชน์กับผู้อื่น: หากคุณต้องการเพิ่มรูปภาพถัดจากข้อความของลิงก์คุณเพียงแค่ทำ <% = link_to image_tag ('image_path') + "link text", 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

ทางออกที่ดีที่สุดสะอาดและไม่มีห่วงที่ไม่จำเป็น
Lucas Andrade


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

คุณช่วยอธิบายรายละเอียดเกี่ยวกับคำตอบของเราได้ไหม
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>
Vivek Kapoor

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.