这是一个有问题的示例页面:
http://estorkdelivery.com/template/view/69
我们的网站提供模板预览。在您输入文本信息并从字段中跳出后,该网站会提供更新后的图像预览,并将文本添加到该字段。
当服务器返回这张图片时:
http://estorkdelivery.com/file/preview/verify_token:149505eb811f8856a12ec6e71e2932f082a97edf
它在我的控制台中显示为中断并显示以下消息:
Resource interpreted as Image but transferred with MIME type text/html: http://estorkdelivery.com/file/preview/verify_token:149505eb811f8856a12ec6e71e2932f082a97edf
为了涵盖所有基础,我已验证服务器设置了以下 MIME 类型:
application/x-javascript .js
image/jpeg jpeg jpg jpe
image/png png
我不确定为什么会这样。我想知道是否有人可以帮助我解决问题。有什么想法吗?
谢谢!
2012 年 4 月 27 日更新 - 我的问题已被标记,但我已经对此问题进行了研究。如果这个问题不值得回答,至少有人可以指出我需要继续进行故障排除的方向吗?我不会轻率地提问,我在 StackOverflow 上阅读了大量类似的问题,发现自己仍然遇到同样的问题。在没有礼貌解释的情况下被 Markdown 是令人沮丧的。谢谢。
最佳答案
老实说,我不认为这是服务器设置问题;当您的 AJAX 请求返回一个 verify_token
时,我可以使用它从您的服务器获取图像。然后,使用 JavaScript,我可以获得在页面上显示的新预览。
这部分看起来很奇怪:
new $._iframeUpload(form, {
success: function(response)
{
$('.preview').attr('src', 'http://estorkdelivery.com/file/preview/verify_token:'
+ response.verify_token);
var image = new Image();
image.src = 'http://estorkdelivery.com/file/preview/verify_token:'
+ response.verify_token;
image.onload = function()
{
$queue--;
if ($queue <= 0)
$('.updating').hide();
};
}
});
我真的不明白为什么在编辑 img
标签后 创建一个 Image 对象。我会将您的 JavaScript 更改为如下所示(以便 onload
回调有效):
new $._iframeUpload(form, {
success: function(response)
{
var image = new Image();
image.onload = function()
{
$('.preview').attr('src', image.src);
$queue--;
if ($queue <= 0)
$('.updating').hide();
};
image.src = 'http://estorkdelivery.com/file/preview/verify_token:'
+ response.verify_token;
}
});
试试看,如果有帮助请告诉我。
小怪癖
这并不能真正回答您的问题,但它会影响整个图像加载过程的工作方式。您的预览为 700 x 500,但您从服务器返回的新预览为 2900 x 2100!这使您的 AJAX 加载时间比您的初始页面加载时间长得多。您可能会考虑在服务器端缩小它的大小,然后将其传输到浏览器。
关于image - MIME 类型警告导致网站上的图像损坏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10339563/