资源解释为图像，但使用 MIME 类型 text/html 传输 - Angular答案

【问题标题】：Resource interpreted as Image but transferred with MIME type text/html - Angular资源解释为图像，但使用 MIME 类型 text/html 传输 - Angular
【发布时间】：2015-01-22 05:57:54
【问题描述】：

在我的 Angular 应用程序中，我正在使用上传字段，并在文件字段下方显示上传图像的缩略图。图片已上传并显示缩略图，但有时缩略图未显示，当时我收到此错误Resource interpreted as Image but transferred with MIME type text/html

但同一图像有时可能有效，有时可能无效。这是.httaccess 的问题吗？

RewriteEngine   On
RewriteBase     /foldername/
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     .               index.html              [L]

【问题讨论】：

查看浏览器控制台的网络选项卡以查看返回的确切内容，包括标题。
在响应头中我得到了 Content-Type:text/html
但是正文中返回了什么？什么是状态？我的猜测是 404 页面或类似的东西
angular 正在加载项目的背景，然后浏览器挂了..
这也发生在我身上。好奇您是否能够找到解决此问题的方法。我已经尝试了几件事，比如设置新的内容类型标题、将我的 div 标签切换到一个对象并在那里设置内容类型，但仍然得到 text/html。在 localhost 中工作正常，但在部署时不能。

标签： html angularjs mime-types meta-tags

【解决方案1】：

如果您对图像 URL 使用任何角度表达式，请对图像使用 ng-src。

否则浏览器会看到时髦的 URL：

<img src="{{image.url}}">

并且会尝试向显然无法解析的路径发出请求。

但是，在 Angular 使用已解析的表达式创建它之前，以下内容不会有 src

<img ng-src="{{image.url}}"> <!-- browser sees no "src" yet therefore doesn't make a request -->

【讨论】：

但是对于失败的图片，即使我在浏览器中打开图片，例如example.com/foldername/images/imagename.png，图片也不会加载，而是显示网站的背景图片。

【解决方案2】：

一个事实：

...但有时缩略图未显示，当时我收到此错误资源解释为图像但使用 MIME 类型文本/html 传输...

应该在这里回答：Resource interpreted as image but transferred with MIME type text/html

（引用形式的答案确实适合上述情况）

如果您的图像路径设置不正确，很可能会发生这种情况。例如，相对于当前目录“images/myimage.gif”与相对于网络根目录“/images/myimage.gif”。

对“text/html”的引用可能表明服务器返回了错误。

正如 charlietfl 所指出的，这取决于网址何时准备就绪。在角度上，它可能比 DOM 触摸/执行 <img src="" 稍晚。所以要做到这一点 - 等待 url 准备好 - 将其更改为 ng-src

【讨论】：

src中提供的路径如“example.com/foldername/images/imagename.png”
我想说，我们这里的问题是 - 1）图像路径是正确的（好）2）但正如我的回答所说：服务器提供了错误的路径。怎么可能发生？图片的网址稍后设置...例如一旦 $http 确实加载了它。或者某些 model.imagUrl 已解决。这就是我们可以使用角度特征ng-src的地方......希望它有所帮助;）