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

Question

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 -

Images are in place as well -

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.

Answer 1

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

Answer 2

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

Answer 3

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') %>

Answer 4

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