how to insert image in rails - ruby-on-rails

Using Rails, I am creating my first web-site. And I have a problem like this: I can't insert an image in my page (index.html.erb).
I put an image named "main.png" in directory "app/assets/images", and wrote that:
<img src="main.png">
But my image isn't displayed correctly. What I'm doing not right?

You should use the provided helpers by Rails to "automagically" detect paths, fingerprints, ...:
<%= image_tag "main.png" %>
Anyway, I recommend you to read the asset pipeline guides to understand how the assets works in Rails: http://guides.rubyonrails.org/asset_pipeline.html

You should use Rails helpers as markets pointed out.
By the way, the name of the image file should be the same you use as the parameter of image_tag method. You are referencing your image as main.png when the image file is main.jpg
<%= image_tag "main.jpg" %>

Related

the image does not appear in web browser using rails 5

I have problem with my app in rails . i am creating a simple blog in rails. but images not loaded on browser . i have put images on app/assets/images.
If you put file on assets folder, you should using pipeline, like:
<%= image_tag 'profile.png' %>
Or if all you want is the path to image without tag:
<%= asset_path 'profile.png' %>
Moreover, for using path without pipeline like host/img/profile.png, you should put images on:
/public/img/profile.png

Image not loading in dynamic page of Ruby on Rails app

I've done the assets pipeline for my rails project and everything is working fine, except on the dynamic posts page, like http://localhost:3000/posts/2, where images doesn't load. Everywhere else it works fine.
In console I get this error:
ActionController::RoutingError (No route matches [GET]
"/posts/assets/logo.png")
But I used src="assets/m1.jpg in image tag but in the console error the link is different!
What am I missing?
If the image tag has the following exact image path specified:
<img src="assets/m1.jpg" etc="etc">
...then the browser will treat that as a relative URL and try to look it up relative to the URL of the current page, which is http://localhost:3000/posts/2.
As a result, the browser will look for an image with this URL: http://localhost:3000/posts/assets/m1.jpg, which is exactly what's happening in your case.
Try using the image_tag helper instead:
<%= image_tag "m1.jpg" %>
Links that don't start with a / look within the same "folder" you're currently in. Thus when you're on localhost:3000/posts/2 you're in the posts 'folder' and so it looks for localhost:3000/posts/assets/m1.jpg.
If your start a link with a / it'll look from the top of the current site localhost:3000, thus /assets/m1.jpg will look for localhost:3000/assets/m1.jpg which is where you want it to be looking.
In your code you, can use the image_tag helper instead of manually writing out your image tags:
image_tag('m1.jpg') # <img alt="M1" src="/assets/m1.jpg" />
You should use the helper <%= image_tag('m1.jpg') %> and put your image in the assets/images/ directory.
The helper will generate the correct path to the image

Rails image asset tag helper

In rails you can just a regular html img tag in your templates, what is the purpose of using an asset tag helper?
<%= image_tag "header.png" %>
vs.
<img src="header.png">
I think the image_tag also uses the asset path helpers. So it will automatically use '/assets/header.png'. Also if you have asset digest turned on I think it will automatically use '/assets/header-asdfasd.png' on production.
Actually, any image_tag would be transformed into HTML img tag.
I think Rails just provides some way to create HTML in Ruby/Rails way in case you are not a HTML guy, of course you can just use HTML img tag if you like.
Not only Rails, some other render utils, like Razor in C# , provide the similar feature.

How should I access the asset_url helper in the view

When I try to use asset_url in my view (Rails 3.2), I get a NoMethodError.
What do have to do to be able to use AssetUrlHelper's methods in my views?
To explain this a bit better and maybe find an alternative solutions: I need to get an "asset link" to file attachments created with carrierwave.
My model has an attachment which points to a file in my assets directory. I need to draw a link to this file.
= link_to model.name, model.attachment(:size)
gives me /myfiles/model/id/attachment/size.png (which is what is persisted by carrierwave)
= image_tag model.attachment(:size)
gives me the wanted http://static_host.com/.../size.png
but I have no need for an image tag, but the plain link to the file at the asset host.
The following works ok for me:
<%= link_to "link to asset", asset_path(article.image.url) %>
I'm using paperclip but I doubt it makes much difference
I think the helper asset_path belongs to asset files (like .css and .js) , not views. In views is proper to be used helpers like image_tag or stylesheet_include_tag. This is the idea behind the asset-pipeline - to ease reference to assets.

Create image_tag for lower level foldername + stored image URL

How do I create an image_tag for a images stored in a lower level of the default assets/images directory? Currently I am storing all of my pictures in the assets/images/pictures folder.
Heres an example. Currently using #mypic instance variable with the stored base url:
pic1.jpg
.erb file:
<%= image_tag #mypic.photoUrl %>
creates an image tag
<img src="/assets/pic1.jpg" alt="pic1">
What I want is for the src to be /assets/images/pictures/pic1.jpg
OR is ruby on rails convention to put all my heterogeneous images (eg logo, profile pics, arrow pics, landscape pics, button pics) in the image directory?
Thanks!
The quick, easy solution would be to just write `<%= image_tag "pictures/#{#mypic.photoUrl}" %>.
Documentation for image_tag here.

Resources