6

我有一个非常奇怪的情况，即站点部署到 Windows Azure 后 CSS 图像不显示。

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

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

  3. 我没有使用相对路径，总是在我的视图 /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 个应用程序运行完美。

4

1 回答 1

7

我认为您的 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 秒。:-)

希望有帮助。

于 2012-11-14T18:55:21.653 回答