Image does not display on Heroku

Question

I have two images on a static web page in a Ruby on Rails web application. Both images are in the same place:

/app/assets/images

The image tag for both is generated in the same way, barring some attributes:

<%= image_tag("logo.png", alt: "Logo", width: 150) %>

<%= image_tag("image.jpeg", alt: "image", class: "img-responsive") %>

Both work fine on the local server, but when I push to production, only the first image displays. The source shows the tag for the second image is not being processed correctly:

<img alt="Logo" width="150" src="/assets/logo-9e9dd9c19ef18b3ef26e23f11d73a8817af6cea78a5d9e1a34691d591a780987.png" />

<img alt="image" class="img-responsive" src="/images/image.jpeg" />

I don't understand why one works and the other doesn't?

In terms of context, the first image is PNG and part of the layout, rendered in application.html.erb. The second is part of the page view yielded into application.html.erb. Does that make a difference?

Any pointers in the right direction? Thanks for your help.

Regards,

Jonathan

Answer 1

try below code:

config/environments/production.rb

config.assets.compile = true

then run command:

RAILS_ENV=production rake assets:precompile

then push all compiles files and menifest file to heroku.

Answer 2

Seems like you are not precompiling jpeg .

Make sure you have this line in config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( *.jpg *.jpeg some-other.css some-other.js)

Answer 3

The problem really is that your assets are not precompiled to work on production.

For a little explanation and lesson to learn from as a newbie, Rails comes bundled with a task to compile the asset manifests and other files in the pipeline.

Compiled assets are written to the location specified in config.assets.prefix . By default, this is the /assets directory.

You can call this task on the server during deployment to create compiled versions of your assets directly on the server.

You can run the task below from your terminals for your images or assets to show on production and redeploy to heroic:

RAILS_ENV=production bin/rails assets:precompile

For more read-up, kindly refer to Rails Documentations on Precompiling Assets

I hope this helps a little for your to learn.

Answer 4

The difficulty with the accepted answer is that these days Heroku strongly recommends that you use the Heroku asset compiling process rather than precompiling.

I had a similar problem, in my case the image was mounted with

<%= image_tag 'fig_2b', alt: 'graph' %>

This was loading fine in development but not on Heroku. This was because I was not specifying the file extension. The asset building process on Heroku appears to be more strict, and requires the correct extension. The solution was to add the relevant extension, which in this case was .png , ie

<%= image_tag 'fig_2b.png', alt: 'graph' %>

I wonder whether the problem with the jpeg file in the question was that it should have had the jpg extension. Perhaps at that point in time, the Heroku asset building process did not recognise jpeg .

Incidentally, I learnt about compiling on Heroku the hard way. I used to precompile the assets, and I struck a sequence of weird problems. The advice I received from Heroku was to only precompile if you have a very deep understanding of sprockets . I stopped experiencing such problems when I let Heroku do the compiling.