breaking into the unknown…

background-image url( ../img/glyphicons-halflings.png ) not found

Leave a comment

Bootstrap, use two sprite image glyphicons-halflings.png and glyphicons-halflings-white.png to represent its various icon images. I have these two images in public folder of my app. The image loading properly in Development mode, But failed to load in production. If you do not want to read the detail below, skip to solution at the end

I inspected the icon path in Firebug, and see that both in Development and Production, the image path is generated as below

background-image: url(“../img/glyphicons-halflings.png”); # So, it mean, the image should be found by moving out of the folder which contain the css file, then going inside img folder.

I copied the location of the css file in Development and Production from firebug which look like as below



I have kept my bootstrap.min.css in vendor/assets/themes/cyborg/css folder.


The difference is obvious i,e In production I have set assets compile to false, but is true by default in Development.

config.assets.compile = false # why to not set it to true in production is explained in detail here on stackoverflow.

In production, I use to compile the asset myself manually with below command

bundle exec rake assets:precompile RAILS_ENV=production

Now, what it do… It will precompile all the css file into one application.css file with attached fingerprint ( example: application-62b40f21651cc1aee1a5ab5aed48f757.css above ), all js into single application.js and precompile all images present anywhere in app/assets or vendor folder, and place them all in public/assets folder.

In production, with asset pipeline disable with config.assets.compile = false, assets can be only served from public and public/assets folder and never from app/assets folder. If you do not want any thing to precompiled with above command place it directly in public folder. All other thing in app/assets or vendor will be precompiled and placed in public/assets folder

So below is the Problem and Solution

Problem: Image loading in Development but not in Production

With asset pipeline enabled by default in Development(config.assets.compile = true), asset pipeline try to load any asset like image, css or js file from  public, app/assets and vendor folder of your application and give not found if not available anywhere. So in Development , it able to find the image finally from the public folder. But, in production, I have disabled the asset pipeline, So, it try to serve the asset from the public folder only and at the defined path.

I do have placed the two images in img folder outside the folder which contain my bootstrap.css file. See the path below



Now when I , precompiled the assets manually with below command

bundle exec rake assets:precompile RAILS_ENV=production

The css and image file are stored at below path



But, url generated is background-image: url(“../img/glyphicons-halflings.png”) , if you make it  background-image: url(“glyphicons-halflings.png”) it will start working

Solution: Adding the image at correct path or modifying the path

solution 1:

url generated is background-image: url(“../img/glyphicons-halflings.png”) , So since application.css is at path public/assets/ , the correct path of image should be public/img/. Copy the two image in public/img/ and commit the file, restart the server, It will start working

NOTE : any file in public folder is not precompiled by asset pipeline. So if you want your file to be prcompiled, place it in app/assets or vendor and override the default path as in solution2

solution 2:

override the default path background-image: url(“../img/glyphicons-halflings.png”) in bootstrap_and_overrides.css file of icon as below

[class*=” icon-“] {
background-image: url(“glyphicons-halflings.png”);
.icon-white {
background-image: url(“glyphicons-halflings-white.png”);

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s