4

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">
Improve this question
1
  • Please seem my updated answer. The solution you have chosen is incorrect, and will fail when you try to deploy your application. Commented Dec 22, 2015 at 18:08

2 Answers 2

Reset to default
9

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">
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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">
@NadjaKuhn That is wrong. You cannot hard-code asset paths like this, or it will fail in production!
Thank you very much! You solved my problem and I understand much better now! I can't upvote your answer, because I don't have enough reputation.
0

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.

Improve this answer

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.