4

when running my mvc website locally (VS IIS) images are displayed correctly:

css snippet:

.sprites {
    background: transparent url(../images/sprites.png) no-repeat 0 0;
}

However, when the site is published to the server OR Local IIS (not VS IIS), images fail to load (giving invalid path)

the only way to display images correctly on the Server is to modify css files and instead of "../images/sprites.png" have "/content/images/sprites.png"

why is that?

tereško
  • 58,060
  • 25
  • 98
  • 150
ShaneKm
  • 20,823
  • 43
  • 167
  • 296
  • but it does work locally with "../images". why would it make a difference, taking the same website and moving it to another computer's IIS?? – ShaneKm Feb 11 '13 at 15:08
  • .. may be pointing it to a different file path than on the remote server. Use Fiddler2 to intercept the HTTP request and see where the images are pointing to. – Darren Feb 11 '13 at 15:10
  • Hey [check this](http://stackoverflow.com/q/11355935/1211329) It might help you. – KKS Feb 11 '13 at 16:00

3 Answers3

5

I figured it out:

MVC4 comes with \App_Start\BundleConfig.cs file which is used for minimizing css/js scripts.

Whenever I published my website (RELEASE) it was calling \Content\css (minimized file) which contained paths to my images ("../images/etc.."), which was incorrect since css file was no longer WITHIN /Content/Styles/style.css but /Content/css (minimized version).

I had to modify it:

From:

bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/styles/all.css",
    ..

To:

        bundles.Add(new StyleBundle("~/Content/styles/css").Include(
                "~/Content/styles/all.css",

..

and in my layout.cshtml:

@Styles.Render("~/Content/styles/css")
ShaneKm
  • 20,823
  • 43
  • 167
  • 296
  • It's because bundling doesn't happen in debug mode, which is likely how you were running your project locally - http://stackoverflow.com/questions/14595405/404-errors-on-bundled-jquery-css-vs2012-publishing-to-azure/14595525#14595525 – MikeSmithDev Feb 11 '13 at 16:42
0

Looks like the path in your CSS is not pointing at the correct image location. .. indicates one level up, I assume that directory does not have an images folder, hence why you have to specify the content/images folder explicitly.

Darren
  • 68,902
  • 24
  • 138
  • 144
  • @Shane KM - `..` may be pointing it to a different file path than on the remote server. Use Fiddler2 to intercept the HTTP request and see where the images are pointing to. (The request will be highlighted in red) – Darren Feb 11 '13 at 15:19
0

The css path has to be the same relative to the image path on both systems. Is that so ?

Lucian Depold
  • 1,999
  • 2
  • 14
  • 25