Heroku is not serving images (assets) with rails 4

This is a topic with a lot of responses, I just posted in case you reach this page and you want to know how.

Maybe you have something like:

In your css file

background-image:url("./logo.png");

or in your views (haml in this case)

%img { src: 'assets/header/logo.png'}

You have two ways to solve this:

Manual Configuration

By default Rails 4 will not serve your assets. To enable this functionality you need to go into config/application.rb and add this line:

config.serve_static_assets = true  
Automatic Configuration

In your Gemfile add:

gem 'rails_12factor', group: :production  

Then run

$ bundle install

This gem will configure your application to serve static assets so that you do not need to do this manually in a config file.

Then you might use the Rails Way to do it.

Sprockets will only process these helpers if your stylesheet file extensions are either .css.scss or .css.sass

  • Image specific helper:
background-image: image-url("logo.png")  
  • Agnostic helper:

background-image: asset-url("logo.png", image)

background-image: asset-url($asset, $asset-type)

  • Embed the image data in the css file:
background-image: asset-data-url("logo.png")  

In the other way for things like this %img { src: 'assets/header/logo.png'}

You might use rails helpers like

= image_tag "header/logo.png"

Now git push heroku master and there you go, your assets are visible on heroku.

Victor Velazquez

Coder, Musician, Startups, Passionate Dancer & Life Lover. Software Engineer at MagmaLabs, Co-founder of Web Dev Talks, Co-founder of Voltaire, Co-founder of Paqkit, Ex-co-founder of Zaznova.

Subscribe to The zazvick's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!