If I locally precompile, should my images when inspected show the long precompiled name?

Question

I have a rails 4.0.1 ruby 2.0.0 app.

I'm locally precompiling: RAILS_ENV=production bundle exec rake assets:precompile.

My configurations in production.rb file are: config.serve_static_assets = true config.assets.compile = true

The images in my app/assets/images folder are in the public/assets folder, for example 'starsw600-xxxlongnumberxxx.png'

When I deploy in Heroku I get " Detected manifest file, assuming assets were compiled locally" and my images show up.

My question is when I inspect the image I get 'background-image url("http://abc-abc-abc.herokuapp.com/assets/starsw600.png")'

Same as when I don't precompile. When I inspect the element shouldn't I get 'background-image url("http://abc-abc-abc.herokuapp.com/public/assets/starsw600-xxxlongnumberxxx.png")'

thus verifying that heroku is using the locally precompiled images that I made?

When I change config.assets.compile to false 'config.assets.compile = false' the images don't show.

So question is: If I locally precompile, should my images when inspected show the long precompiled name?

This is my stylesheet ricardoorangetest/app/assets/stylesheets/show.css.scss

.stars {
  background-image:image_path('/starsw600.png');
  height:30px;
  width:600px;
  //background-color:#ffffff;
  background-repeat:no-repeat;
  border-color:#190c00;
  border-style:solid;
  border-width:2px 0px 0px 0px;
}

@davidfurber config.assets.compile = true and config.serve_static_assets = false yields the same. Same being "detected manifet file...compiled locally" and inspecting image gives .../assets/starsw600.png. — flobacca
@davidfurber config.assets.compile=false and config.serve_static_assets=false yields no images. — flobacca

Richard Peck Richard Peck · Accepted Answer · 2013-11-16T10:12:37

If you're using Heroku, and consequently have to serve static assets, you'll have to work with asset fingerprinting regardless of how you precompile

Dynamic Paths & Precompiling

We had this problem with Heroku, and we found the best way to fix the issue is to use dynamic asset paths, with SCSS

Instead of using the static CSS methods of calling images:

#assets/application.css    
background-image: url('/img/file.png');

The problem here is CSS cannot dynamically render the image paths, meaning that when you run the production app, you'll never see the images. The fix for this is to use SCSS like this:

#assets/application.css.scss
background-image: image_path('/img/file.png');

This will compile the image correctly, allowing it to show in Heroku

Hope this helps?

If I locally precompile, should my images when inspected show the long precompiled name?

1 Answers