link_to image_tag with inner text or html in rails

Question

I want to output the following with Ruby on Rails link_to and image_tag methods:

<a href="#">Lorem Ipsum <img src="/images/menu-arrow-down.gif"></a>

What would be a good way in Rails?

score 91 · Answer 1 · edited Mar 04 '16 at 14:54

91

You can use blocks as an alternative to the string interpolation with correct usage html_safe. For example:

<%= link_to '#' do %>
  Lorem Ipsum <%= image_tag('/images/menu-arrow-down.gif') %>
<% end %>

edited Mar 04 '16 at 14:54

lorem monkey

3,942
3
35
49

answered Mar 22 '11 at 05:45

Kevin Sylvestre

37,288
33
152
232

+1 works when you want to wrap a span & class around the text as well :) – gef Dec 17 '12 at 00:53

score 35 · Answer 2 · edited Mar 18 '14 at 06:03

35

Or a shorter way is

<%= link_to image_tag('image/someimage.png') + "Some text", some_path %>

edited Mar 18 '14 at 06:03

answered Jun 21 '12 at 22:37

Fazley

481
4
3

score 34 · Accepted Answer · edited Sep 04 '13 at 23:45

34

Why not just use a link to and image tag?

<%= link_to "hiii #{image_tag(yourimagepath)}", "link_path" %>

You could also try the appending done above (string + image_tag), but it will throw an error if one of those things becomes nil. Using interpolation, it will just show a blank image(or string) if it is nil.

For Rails 3, you will need to use html_safe:

<%= link_to "hiii #{image_tag(yourimagepath)}".html_safe, "link_path" %>

edited Sep 04 '13 at 23:45

James Chevalier

10,604
5
48
74

answered Mar 22 '11 at 05:19

corroded

21,406
19
83
132

2

This does not work in Rails 3, @Fazley's answer below works. Due to the asset pipeline, there is no need to use images/ in the path either. – Narayana May 19 '13 at 05:55
this is actually printing out the text of the image tag for me – Carl Dec 12 '15 at 13:58

score 4 · Answer 4 · edited Mar 22 '11 at 19:38

4

link_to(image_tag("image.png", :alt =>  "alt text", :class =>"anyclass"), image_url)

edited Mar 22 '11 at 19:38

thkala

84,049
23
157
201

answered Mar 22 '11 at 05:23

trying_hal9000

4,343
8
43
62

score 3 · Answer 5 · answered Jun 15 '12 at 16:41

I cannot seem to figure out how to add a comment to @corroded's answer. However, if you are using Rails 3, his answer will not work as expected. It might not be immediately obvious how to fix this, at least it wasn't for me. I knew I needed to add html_safe, but put it in the wrong place. In retrospect, it was obvious, but I thought I would include it here for others like me who make the "rookie" mistake.

<%= link_to "hiii #{image_tag(yourimagepath)}".html_safe, "link_path" %>

be careful though, if you are using a user assignable variable for "hiii" you need to sanitize it first.

<%= link_to (h(my_model.some_string) + image_tag(yourimagepath)).html_safe,
            "link_path" %>

Note that there is no issue with my_model.some_string or yourimagepath being nil because both h() and image_tag() return strings when passed nil.

score 2 · Answer 6 · answered Jan 04 '14 at 07:33

2

I prefer this approach in HAML

= link_to root_path do
  = image_tag "ic_launcher.png", size: "16x16"
  Home

answered Jan 04 '14 at 07:33

Eric Woodruff

6,380
3
36
33

Eribos · Answer 7 · 2015-04-02T22:53:47.360

2

Here's a cool way to use a link_to to include an image, and a mailto href with Text (displayed next to the image):

<%= link_to image_tag("image.png") + " some@email.com", 
                         href: "mailto:some@email.com" %>

Giving you something like this in your view (the entire image and text become an mailto href):

hyperlinked image and text with mailto

edited Apr 02 '15 at 22:53

answered Apr 02 '15 at 22:46

Eribos

271
3
3

score 1 · Answer 8 · answered Aug 22 '19 at 09:13

1

For me this worked just fine:

<%= link_to(image_tag(<URL>,style),<URL>) %>

answered Aug 22 '19 at 09:13

Ivasan

101
1
7

score 0 · Answer 9 · edited Oct 08 '13 at 11:50

0

i found out this also which worked.

link_to(image_tag("/images/linkd.png",:alt=>"twt"){},:href=>"some_url",:target=>"_blank")

edited Oct 08 '13 at 11:50

Ben

51,770
36
127
149

answered Oct 08 '13 at 11:32

Vishnu

1

link_to image_tag with inner text or html in rails

9 Answers9

Linked