rails + HTML: how to show image in my webpage

Question

Hi I have the following html inside one of my javascript files.

function addToInfoWindow(infoWindowContent)  
{  
    infoWindowString = '<div id="infoWindowString">'+  
    '<img src="assets/images/rails.png">'+  
    '<h2>You Clicked:</h2>'+  
    '<p>'+infoWindowContent+'</p>'+  
    '<p><a href="http://www.google.com">See more info</a></p>'+  
    '<p><a href="http://www.cnn.com">see news</a></p>'+  
    '</div>';  
    infoWindow.setContent(infoWindowString);  
}

The problem is I cannot get the image to show up in the info window.

I realize this \could be because rails has some sort of helper function to show images in its webpages. But I haven't been able to find how to call it or what it is. Can someone help please.

EDIT- Changed to following after the response below:

function addToInfoWindow(infoWindowContent)  
{  
    infoWindowString = '<div class="infoWindowString">'+  
    '<img src="/Users/AM/Documents/RailsWS/cmdLineWS/Businesses/app/assets/images/rails.png">'+  
    '<h2>You Clicked:</h2>'+  
    '<p>'+infoWindowContent+'</p>'+  
    '<p><a href="http://www.google.ca">See Menus</a></p>'+  
    '<p><a href="http://www.google.ca">Upload a Menu</a></p>'+  
    '</div>';  
    infoWindow.setContent(infoWindowString);  
}

But image still not showing up :(

Andrew · Accepted Answer · 2012-04-20 23:34:38Z

1

If you're using the default setup with rails asset packaging it will append a timestamp onto asset filenames meaning just browsing to /assets/images/foo.jpg won't necessarily give you what you want.

The rails helper to get an image tag is just image_tag 'example.jpg'. OR if you just want the url, image_url 'foo.jpg'.

For any given image you want stored you could attach it to a data attribute, for instance in a view you could do:

<a id="image_link" href="#" data-image-url="<%= image_url 'foo.jpg' %>">Click to see image</a>

You can get that path anywhere in jQuery using

var imageUrl = $('a#image_link').data('image-url')

answered Apr 20, 2012 at 23:34

Andrew

43.2k53 gold badges184 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bfavaretto · Accepted Answer · 2012-04-20 23:14:26Z

1

You are using a relative URL for your image (assets/images/rails.png), so the browser will try to load it from an address relative to the current page. For example, if the image is at

http://example.com/assets/images/rails.png

but you are currently at

http://example.com/something/somepage.html

the browser will try to load it from

http://example.com/something/assets/images/rails.png

and it will fail.

You should be using an absolute URL.

answered Apr 20, 2012 at 23:14

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

2 Comments

banditKing Over a year ago

Thanks for the response, I have added some code above after changing the original function based on your suggestion. However, its still not working. :(

bfavaretto Over a year ago

I was suggesting you passed an absolute URL, but you're passing an absolute path on your local file system. Start by trying just /assets/images/rails.png (don't forget the initial slash).

Collectives™ on Stack Overflow

rails + HTML: how to show image in my webpage

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related