MIME类型警告导致网站上的图像损坏

时间:2012-04-26 18:49:37

标签: image mime-types

以下是一个有问题的示例页面:

http://estorkdelivery.com/template/view/69

我们的网站提供模板预览。从字段输入文本信息和选项卡后,网站将提供图像的更新预览,并将文本添加到字段中。

当服务器返回此图像时:

  

http://estorkdelivery.com/file/preview/verify_token:149505eb811f8856a12ec6e71e2932f082a97edf

在我的控制台中显示以下消息:

  

资源解释为图像,但使用MIME类型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上读到了很多类似的问题,发现自己仍然遇到同样的问题。在没有礼貌解释的情况下被标记下来是令人沮丧的。感谢。

1 个答案:

答案 0 :(得分:0)

老实说,我不认为这是服务器设置问题;当您的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加载时间比初始页面加载时间长得多。您可以考虑在服务器端调整它的大小,然后将其传输到浏览器。