为什么这些资源无法加载？答案

【问题标题】：Why are these resources failing to load?为什么这些资源无法加载？
【发布时间】：2013-05-19 05:25:25
【问题描述】：

我的 asp.net 项目在 \Content\Images 文件夹中有几个 .png（和几个 .gif）文件。

两个没有找到； Chrome 开发工具的控制台告诉我：“加载资源失败：服务器响应状态为 404（未找到）”

...果然，如果我单击它显示的链接（例如，http://localhost/@System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]/Content/Images/PlatypusorangeSprite .png）它将我带到 GDT 的资源选项卡，虽然图像文件夹显示该文件在那里，但它有一个“损坏的图像”表示。

同样的事情发生在另一个图像文件上（它们都在同一个位置，并且在 CSS 文件声明中对它们的引用确实指向它们存在的位置，例如：

background:#E5EDFE url('/@System.Configuration.ConfigurationManager.AppSettings["ThisApp"]/Content/Images/PlatypusorangeSprite.png') repeat-x 0 -369px;

我可以在 VS2010 IDE 中双击这些文件，它们会打开并且看起来不错。

那么为什么在浏览时没有发现它们/被视为损坏的图像？

更新

好吧，显然这与我将所有样式声明从 cshtml 文件移到页面中引用的单独样式表/CSS 文件中有关（我回到了糟糕的旧方式，它工作正常 -再次找到了 png（我什至想象我听到他们在唱“Amazing Grace”））。既然它不是那些 png 的相对路径，为什么样式信息在 Content 文件夹中的 .css 文件中而不是“内联”呢？

我讨厌你做“正确”的事情，这会让事情变得更糟。

【问题讨论】：

是否正在加载其他 png 和 gif 文件？不确定您的问题，如果所有这些都无法加载，我会检查服务器上设置的 mime 类型。
我提到只有两个不加载。

标签： asp.net css png http-status-code-404 google-chrome-devtools

【解决方案1】：

一些客户端不小心将后缀转换为大字母，如 .JPG 或 .PNG。如果你用 .jpg 或 .png 调用它们，它们将不匹配。
通过在 Visual Studio 中编译来渲染模板，打开浏览器，查看 HTML 并检查图像的渲染路径：<image src="..." />。或者，尝试在浏览器中通过 ftp 通过 url 直接调用图像，例如 ftp://www.mysite/pics/，然后单击显示图像的链接。然后你在url中得到正确的路径。
还要检查后缀是否像 mypic.jpg.jpg 一样意外加倍。

【讨论】：

那为什么其他都没有问题呢？不过，我会尝试一下，只是为了笑……这会伤害到什么 - 找不到第二次？

【解决方案2】：

可能有任何区分大小写的差异吗？

【讨论】：

不，实际的文件名是 PlatypusorangeSprite.png 就是这样引用的...
啊。这是因为现在从样式表所在的位置引用图像。而不是你的 html 文件。所以.. 如果你的 css 文件放在另一个目录下，比如 css/layout.css，那么你的图像引用必须来自 css 文件夹，../
你可能是对的（经验观察会表明这一点），但在我看来，引用是一个明确的完整路径，因此引用的来源无关紧要......
嗯.. 是的，你是对的。绝对 url 引用不会有任何影响。那我就难倒那个了。如果您继续深入研究，请随时关注我。