7

Referencing Images in Rails 5 CSS Stylesheets

 3 years ago
source link: https://fuzzyblog.io/blog/rails/2017/08/09/referencing-images-in-rails-5-stylesheets.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Referencing Images in Rails 5 CSS Stylesheets

Aug 9, 2017

I recently had the issue where I switched the images in my stylesheet from an absolute url on someone else's domain to a relative path indicating a file in my /app/assets/images directory and that worked fine – until I deployed and then my image disappeared. It took a few iterations to figure it out and here's the trick:

  1. Make sure you are using the sass-rails gem which provides the necessary helpers.
  2. For an image located in /app/assets/images/intro-bg.jpg, assuming that it is a CSS background image, you want to reference it as background: url(asset_path("intro-bg.jpg")).
  3. You need to rename your stylesheet with a .scss extension so it is fed through the preprocessor.

Here's a Stack Overflow on this but please note that the highest answer was actually wrong (at least for me).

You should also note that, in my opinion, the asset pipeline is tricky and I no longer trust anything in it until I've deployed to production and tested it myself.


Posted In: #rails #CSS


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK