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