why css image will not show when EnableOptimizations = true?

Question

i used mvc4 and when i change

BundleTable.EnableOptimizations = true;

in BundleConfig.cs file my image can not load and failed.

location of my image on my solution:

 themes/default/Profile/images/abc.png

in my BundleConfig:

  bundles.Add(new StyleBundle("~/Content/profile/PRA")
  .Include("~/Content/themes/default/profile/mycss.css"));

my css :

.sampleback{
                background-image: url('images/abc.png');
            }

if i want to use BundleTable.EnableOptimizations = true; i must my css class to until it works:

.sampleback{
              background-image:url('../themes/default/Profile/images/abc.png');
         }

is it a bug?or I'm on a wrong way?

Answer 1

Relative paths in external CSS resources are resolved as relative to the path of the CSS resource itself.

So if your not-bundled CSS lies in one path, and the bundled CSS gets downloaded from another path, then of course the relative path will not be correct any more. (Unless the bundling mechanism would take care of that, and correct such relative paths itself before it writes then into the bundled CSS.)

Easiest solution would be to always use paths that are relative to the domain root, so starting with a /. Of course that makes your project less flexible, should you f.e. one day move it to a sub-folder. If you want to avoid that as well, then look for a kind of solution that pre-parses your CSS, and allows you to use a variable/constant to define a base path in a central place.