Geek Answers Handbook

My CSS images do not work on Windows Azure

I have a really strange situation where CSS images do not appear after deploying a site to Windows Azure.

  • Images are part of the project (all files and subfolders are included in the project)

  • All images have a content assembly action.

  • I don't use a relative path, I always use an absolute path in my views / contents / path / in / images, but there is a relative path URL on the CSS (../img/image.png), but that should not be a problem.

  • Static files are fine (CSS and Javascript work correctly), except that the images are not displayed.

I deployed using git, but even with the Publish Wizard I get the same result.

There are images if I request them with the full path. This is "unrealistic";)

I must be neglecting the key point here, but can't find it. Thank you for your time.

Edit:

The image works through the img tag. Thus, only CSS images that do not make any sense, they work correctly locally.

I think I can share the link so you can see this thing live;)

http://receivably.azurewebsites.net

Look at the top left logo, nothing is displayed, here is HTML and CSS (this worked well a couple of words ago and worked fine locally).

<a class="brand" href="/">name</a>

In CSS:

 .navbar .brand { display: block; width: 180px; height: 34px; padding-top: 0; padding-bottom: 0; margin-top: 2px; margin-left: 10px; overflow: hidden; font-size: 18px; line-height: 600px; color: #333; background: url(../img/logo.png) no-repeat 0 0; }

And if we request the file directly there: http://receivably.azurewebsites.net/content/site/img/logo.png

The CSS file is placed in / content / site / css and the images in / content / site / img.

May I add that now I can not press git. Only the publication wizard works. I have problems with this site on Azure, my 3 applications work flawlessly.

+6
source share
1 answer

I think your css bundler breaks everything.

Here is what I see in the bundled CSS from the home page (I slightly reduced it):

 .brand { display:block;width:180px;height:34px;padding-top:0;padding-bottom:0;margin-top:2px; margin-left:10px;overflow:hidden;font-size:18px;line-height:600px;color:#333; background:url(../img/logo.png) no-repeat 0 0 }

Note: background: url (../img/logo.png) , which may be incorrect from CSS, which is executed from /bundles/

He must say:

 ../content/site/img/logo.png

Or, as you said, /content/site/img/logo.png

This explains why it works locally (not included) and even in previous deployments - because the code associated with it may change lately. This is a classic issue with release, and one of the reasons why turning on full time (not only in Release mode) is reasonable, even if another 0.500 seconds are required for compilation time. :-)

Hope this helps.

+6
source

More articles:


All Articles