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

Posted 2023-03-15

【中文标题】MIME 类型警告导致网站图像损坏

【英文标题】：MIME Type Warning Causing Broken Image on Website

【发布时间】：2012-05-07 13:09:39

【问题描述】：

这是一个有问题的示例页面：

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 类型：

应用程序/x-javascript .js

图像/jpeg jpeg jpg jpe

图片/png png

我不确定为什么会这样。我想知道是否有人可以帮助我解决问题。有什么想法吗？

谢谢！

2012 年 4 月 27 日更新 - 我的问题已被标记，但我已经对此问题进行了研究。如果这个问题不值得回答，至少有人可以指出我需要继续进行故障排除的方向吗？我不会轻易提出问题，而且我在 *** 上阅读了很多类似的问题，发现自己仍然遇到同样的问题。没有礼貌的解释就被降价是令人沮丧的。谢谢。

【问题讨论】：

当我点击该链接时，我看到的是 404 页面，而不是图像。

这是一个示例链接。我更新了我的问题描述以显示正确的链接和更多信息。

如何处理对verify_token 资源的请求？它是否路由到脚本？请提供更多详细信息。

如果您发布您的 AJAX 代码可能会有所帮助，以便我们了解您如何请求图片。

@eggyal - 我想这是问题的一部分。这个系统的设置方式，我真的不知道我在看什么。所以我不能回答你的任何一个问题。我相信我将不得不尝试聘请另一位开发人员来解决这个问题。感谢您尝试提供帮助。

【参考方案1】：

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