CODEWITHSUNDEEP
ruby-on-railsrubyherokubackground-image
Vitaly Zalivan
Vitaly Zalivan

Reputation: 137

Don't show background images on Heroku. But local is working

My tag:

= link_to '', root_path, class: 'items__footage'

My selector:

.items__footage {
  display: inline-block;
  content: '';
  width: 300px;
  min-height: 300px;
  background: url('/assets/footage_still.png') no-repeat;
  background-size: auto 100%;
}

The path of my image is assets/images/footage_still.png. If I indicate this path, my image does not work locally.

I have done rake assets:precompile. But it did not help.

Upvotes: 1

Views: 176

Answers (3)

Kiran Mahale
Kiran Mahale

Reputation: 105

if you can use ruby code in your css file then use items_footage's background like this.

background: url("<%= asset_path('footage_still.png') %>");

To use ruby code inside css file make that file as filename.css.erb

Upvotes: 1

dstrants
dstrants

Reputation: 7705

You can use image_url('footage_still.png') and let rails find the path of the image

Upvotes: 0

Muhammed Anees
Muhammed Anees

Reputation: 1850

From the documentation

In the production environment Sprockets uses the fingerprinting scheme outlined above. By default Rails assumes assets have been precompiled and will be served as static assets by your web server.

During the precompilation phase an SHA256 is generated from the contents of the compiled files, and inserted into the filenames as they are written to disk. These fingerprinted names are used by the Rails helpers in place of the manifest name.

So, in production all your assets will be precompiled and will be served from public/assets. Also the file will be renamed with a fingerprint. So actually In production your file name will look something like

footage_still-908e25f4bf641868d8683022a5b62f54.png

The fingerprint will changes every time the file content changes and is useful for caching the static assets, generally called cache busting.
So when you hard code the image url /assets/footage_still.png, it will break in production. To handle the situation, rails provides something called asset url helpers.
To make it work, you have to rename your .css file to .scss if not and change.

background: url('/assets/footage_still.png') no-repeat;

to

background: image_url('footage_still.png') no-repeat;

Hope this helps.

Upvotes: 1

Related Questions