Ruby on Rails: Show picture in html in html.erb file

Question

I need a draggable picture on my Ruby on Rails- Website and everything is working fine, except the picture does not show up.

This is the code for the picture with its properties:

<img id="drag1" src="/images/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

If I write this, the picture does show up:

<%= image_tag("img_logo.gif") %>

My question: What do I need to insert in the upper code, so my picture (img_logo.gif) does show up?

The picture itself is located in: /app/assets/images/img_logo.gif

The file, in which this code is written is a html.erb file.

I haven't installed any gems like paperclip or imagemagick.

Edit: Thanks to Meagar and Vic, this will work:

Either this:

<%= image_tag('img_logo.gif', draggable: "true", id: "drag1") %>

OR this:

<img id="drag1" src="<%= asset_path('img_logo.gif') %>" draggable="true" ondragstart="drag(event)" width="336" height="69">

Answer 1

If <img id="drag1" src="/images/img_logo.gif" is working, then the image is not in your asset pipeline, it's in public/images.

If the image were in your asset pipeline, at app/assets/images/img_logo.gif, then the correct URL for it would be /assets/img_logo.gif.

The code you have, image_tag("img_logo.gif") is correct, as it will output the correct URL /assets/img_logo.gif, assuming the image is where you say it is, and you haven't changed any settings regarding the asset pipeline. The fact that you're successfully able to request the image using /images/img_logo.gif tells me that this isn't the case, and you haven't accurately described your situation.

---

Regarding Your comment:

Thanks for your answer: It works, when I typed this in: <img id="drag1" src="/assets/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

Don't do that.

I think you communicated backwards what was happening. I understood that <img src="/images/img_logo.gif" was working, and that image_tag was failing. I now see that image_tag was working all along, but you were trying to figure out how to supply extra attributes (id="drag1" draggable=true etc) to the <img> tag being output.

You cannot hardcode asset paths like that. It will work in development, but the asset URL is different in production, and your site will stop working.

To achieve what you're after, you can either pass attributes to your image_tag helper, or you can use asset_path in your HTML tag:

Either this...

<%= image_tag('img_logo.gif', draggable: "true", id: "drag1") %>

OR this...

<img id="drag1" src="<%= asset_path('img_logo.gif') %>" draggable="true" ondragstart="drag(event)" width="336" height="69">

But do not use this:

<img id="drag1" src="/assets/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

Answer 2

With <%= image_tag("img_logo.gif") %> being used and the image showing up, right click on the image in your website, and click 'inspect element'. You should see that the src is different from '/images/img_logo.gif'. It should have some gibberish.

If it is, the reason is because of how rails handles its assets. Check out this rails guide on fingerprint for more detailed explanation on the rationale of implementing this.

If its not, do share what it is.

Lastly, the production site is not able to access the app/assets folder. It can only access the files and subdirectories in the public folder. You can try putting the gif file in /public/images/img_logo.gif and it should appear with your first code.