CODEWITHSUNDEEP
ruby-on-railsrubyruby-on-rails-3image
swapnesh
swapnesh

Reputation: 26732

Rails: Why images are not showing in my rails basic app

my index.html.erb code -

<h1>Listing products</h1>

<table border="1">

<% @products.each do |product| %>
  <tr>
    <td><%= product.title %></td>
    <td><%= product.description %></td>
    <td><%= image_tag(product.image_url, :class => 'list_image') %></td>
    <td><%= product.price %></td>
    <td><%= link_to 'Show', product %></td>
    <td><%= link_to 'Edit', edit_product_path(product) %></td>
    <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New Product', new_product_path %>

and images are under app\assets\images..but still images are not appearing on front end.

When I Firebug it, i believe image tag is correctly forming...let me know what i am missing in this part.

<img src="/images/product1.jpg" class="list_image" alt="Product1">

Screenshot -

screenshot

Images are in place as well -

image placeholder

Let me know what I am doing wrong and how do i fix it.

EDIT

github.com/swapnesh/depot

Let me know why it is not working in my case.

Although changing /images/product1.jpg To /assets/product1.jpg makes it working.

Upvotes: 18

Views: 39289

Answers (5)

zahidAliKhan
zahidAliKhan

Reputation: 11

If you are following the Agile Web Development With Rails book then there is no problem with the html.erb code. The only issue lies in the scss file. Please check if you have set the td.image display to none! Change display to block and you will see the images.

Upvotes: 0

rorra
rorra

Reputation: 9693

I just checked your application, there is nothing wrong with your code. The only thing is to understand how image_tag works.

Usually you put all your images, javscripts and stylesheests on the app/assets directory. When you work on the development environment, those files are served uncompressed, but when you deploy to production, the assets are precompiled, minified, and the result files are stored in public/assets.

The idea behind minified assets, is just to make the requests faster for the clients, and to save bandwidth.

Now, on the method image_tag, you can use an external path for the image, a local path for the image or a relative path for the image.

When you do

<%= image_tag "http://www.mywebsite.com/image.jpg" %>

it will use the absolute url for the image tag, and you will end with

<img src="http://www.mywebsite.com/image.jpg" />

You can add a local path as well, like

<%= image_tag "/images/image.jpg" %>

Which will end in

<img src="/images/image.jpg" />

which is actually the issue you are having, because rails, when it precompiles the files, it puts everything within /public/assets, and you can access those files by going to the path /assets as the other users explained.

So the code

<%= image_tag "/assets/image.jpg" %>

actually works, because you end with

<img src="/assets/image.jpg" />

The other thing you can do, is to use a relative path, i.e.

<%= image_tag "image.jpg" %>

that will be converted to

<img src="/assets/image.jpg" />

and that will work the same the last scenario.

Nevertheless, on your application, you are going to let the users to upload their own images, this will happen later when you advance on the book, on a real world app, you will use a gem like paperclip or carrierwave

Upvotes: 14

surgentt
surgentt

Reputation: 406

If you are received a file with a .jpeg extension try and renaming the file with just the ".jpg".

From 

<%= image_tag "image.jpeg" %>

To:

<%= image_tag "image.jpg" %>

Upvotes: 1

Peter de Ridder
Peter de Ridder

Reputation: 2399

As Srikanth already said, the assets path should be referenced. As an example you could put <%= image_tag 'rails.png' %> within your code and check firebug (or inspect element within chrome) to check the result.

I'm not quite sure why your code is not working, since I can see you followed Agile Web Development with Rails. I got the depot application running without problems. In your table I see you 'Product1', 'Product2' and 'Product3', is this what you actually filled in within the image_url text_field? What happens if you change 'Product1' to 'product1.jpg'?

On a side note, if you want to use Paperclip, your call should look like this:

<%= image_tag(product.image.url, class: 'list_image') %>

Upvotes: 1

Srikanth Jeeva
Srikanth Jeeva

Reputation: 3011

If you are using asset pipeline http://guides.rubyonrails.org/asset_pipeline.html,

The image path should be /assets/product1.jpg instead of /images/product1.jpg

If you are not using asset pipeline, move the images folder to public/images

Upvotes: 33

Related Questions