CODEWITHSUNDEEP
cssruby-on-rails
user9681729
user9681729

Reputation:

Heroku can't load image from assets

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; }

Upvotes: 1

Views: 508

Answers (6)

fool-dev
fool-dev

Reputation: 7777

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

Upvotes: 0

Akash Pinnaka
Akash Pinnaka

Reputation: 475

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.

Upvotes: 0

memoht
memoht

Reputation: 781

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

Upvotes: 1

Sovalina
Sovalina

Reputation: 5609

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.

Upvotes: 0

jlau
jlau

Reputation: 364

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

Upvotes: 0

Irvan
Irvan

Reputation: 394

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

Upvotes: 0

Related Questions