我的CSS图像无法在Windows Azure上运行

Question

我有一个非常奇怪的情况,在将站点部署到Windows Azure后,不会显示CSS图像.

1. 图像是项目的一部分(所有文件和子文件夹都包含在项目中)

2. 所有图像都具有内容的构建操作

3. 我没有使用相对路径,总是在我的views/content/path/to/images上使用绝对路径,但在CSS上有相对路径url(../ img/image.png),但这应该不是问题.

4. 静态文件没问题(CSS和Javascript正常工作),除了没有显示的图像.

我使用git部署,但即使使用发布向导,我也得到相同的结果.

如果我以完整路径请求它们,那么图像就在那里.这是"不真实的";)

我必须忽略一个关键的东西,但找不到它.谢谢你的时间.

编辑:

图像通过img标签工作.因此,只有CSS图像,没有意义,它们在本地正常工作.

我想我可以分享这个链接,所以你可以看到这个东西直播;)

http://receivably.azurewebsites.net

看看左上角的标识,什么都没有出现,这里是HTML和CSS(这在几个方面表现得很好,并在本地工作正常.

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

在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;
}

如果我们直接请求文件,那就在那里:http://receivably.azurewebsites.net/content/site/img/logo.png

CSS文件放在/ content/site/css中,图像放在/ content/site/img上.

我可以补充一点,我现在无法git push.只有发布向导才有效.我在Azure上的网站上遇到了很多问题,我的另外3个应用程序完美无缺.

Answer 1

我认为你的css捆绑器破坏了东西.

这是我在主页的捆绑CSS中看到的内容(我已经将其缩小了一点):

.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
}

注意: background:url(../ img/logo.png),从正在执行的CSS中可能不正确/bundles/

它应该说:

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

或者如你所说 /content/site/img/logo.png

这可以解释为什么它在本地(非捆绑)工作,甚至在以前的部署中工作 - 因为捆绑相关代码最近可能已经改变.这是一个经典的发布时间问题,这就是为什么打开全时捆绑(不仅仅是在发布模式下)是明智的,即使在编译时需要额外的0.500秒.:-)

希望有所帮助.