Heroku can't load image from assets

Question

I have an image in the assets/images and I want to set it as a background on the main page refers to a given class, but I do not see image in production Heroku

application.scss

.has-bg-img { background: url('img.PNG'); center center; background-size:cover; }

Answer 1

In my Rails app, I change the filename to end with .scss.erb and then have the following as an example. A comment at the top, followed by the example.

//= depend_on_asset "sprite-article-r4.svg"
.contents {
  background-image:url('<%= asset_path("sprite-article-r5.svg") %>');
}

Reference this SO question

Answer 2

you must set a full path like url('localhost/apps/assets/images/myimg.jpg')

Answer 3

If your assets are not static and committed into your repo, and you're trying to reference a dynamically uploaded image, you might have to read on how to work around with Heroku's ephemeral filesystem

Answer 4

You can try image-url or asset-url helpers.
Asset Pipeline

Edit : actually, i'm not sure about your syntax

.has-bg-img {
  background-image: url('img.PNG');
  background-position: center center;
  background-size:cover;
}

it should work better.

Answer 5

In Rails, you have to prepend directory name to url. For your case change

.has-bg-img { background: url('img.PNG'); center center; background-size:cover; }

to

.has-bg-img { background: image-url('img.PNG'); center center; background-size:cover; }

This is because you are storing your image in images(assets/images) directory.

Answer 6

Try to the following

.has-bg-img { 
    background-image: asset-url('img.png'); 
    background-size: cover; 
}

This should work, I don't why you use center center; I think that is syntactically invalid see this Horizontal & Vertical Align