从操作返回图像会导致FireBug/Chrome开发工具出错

本文关键字：FireBug Chrome 开发工具 出错 操作 返回 图像 | 更新日期: 2023-09-27 17:57:37

我有一个简单的表单，可以将图像上传到数据库。使用控制器操作，然后可以发回图像（我已经硬编码为使用jpegs作为该代码）：

public class ImagesController : Controller
{
    [HttpPost]
    public ActionResult Create(HttpPostedFileBase image)
    {
        var message = new MessageItem();
        message.ImageData = new byte[image.ContentLength];
        image.InputStream.Read(message.ImageData, 0, image.ContentLength);
        this.session.Save(message);
        return this.RedirectToAction("index");
    }
    [HttpGet]
    public FileResult View(int id)
    {
        var message = this.session.Get<MessageItem>(id);
        return this.File(message.ImageData, "image/jpeg");
    }
}

这非常有效，直接浏览图像（例如/images/view/1）可正确显示图像。然而，我注意到，当FireBug打开时，我会遇到一个可爱的错误：

图像损坏或截断：数据：Image/jpeg；base64、/f39…（后面是图像的base64表示）。

在Chrome开发工具中添加：

资源被解释为文档，但使用MIME类型的image/jpeg传输。

我检查了正在返回的标头。以下是发送回浏览器的标题示例。没有什么看起来不同寻常的（也许是缓存控制？）：

Cache-Control       private, s-maxage=0
Content-Type        image/jpeg
Server              Microsoft-IIS/7.5
X-AspNetMvc-Version 3.0
X-AspNet-Version    4.0.30319
X-SourceFiles       =?UTF-8?B?(Trimmed...)
X-Powered-By        ASP.NET
Date                Wed, 25 May 2011 23:48:22 GMT
Content-Length      21362

此外，我想我应该提到我正在IIS Express上运行此功能（甚至在Cassini上进行了测试，结果相同）。

奇怪的是，图像正确显示，但控制台却告诉我其他情况。理想情况下，我不想忽视这些错误。最后，为了进一步增加混淆，当被引用为图像（例如<img src="/images/view/1" />）时，不会发生错误。

编辑：可以完全复制此，而无需任何上述操作：

public class ImageController : Controller
{
    public FileResult Test()
    {
        // I know this is directly reading from a file, but the whole purpose is
        // to return a *buffer* of a file and not the *path* to the file.
        // This will throw the error in FireBug.
        var buffer = System.IO.File.ReadAllBytes("PATH_TO_JPEG");
        return this.File(buffer, "image/jpeg");
    }
}

从操作返回图像会导致FireBug/Chrome开发工具出错

您假设MIME类型始终是image/jpeg，而您没有使用上传图像的MIME类型。我看到了不同浏览器为上传的图像发布的MIME类型：

  • image.gif
  • 图像/jpeg
  • 图像/pjpeg
  • 图像/png
  • 图像/x-png
  • 图像.bmp
  • 图像/tiff

也许image/jpeg不是文件的正确MIME类型，开发工具会给你一个警告。

可能是会话。Save/Get正在截断jpeg？

使用Fiddler并将此文件保存在服务器上。尝试直接向映像发出GET请求。然后尝试对操作方法执行GET。比较fiddler的标题和内容（可以保存并与BeyondCompare的试用版进行比较）。如果两个get请求都匹配，那么。。这是没有意义的——在这种情况下会有所不同，希望能指出问题所在。有些东西必须有所不同，但如果没有看到小提琴手的输出，很难说：）

可能是图像本身损坏了吗？如果你将其保存为网站上的文件并直接访问，会出现错误吗？与你在Fiddler中的行动请求相比，这个请求看起来怎么样？可能是浏览器试图通过扩展来获取内容类型，你可以尝试这样的路线来查看是否有任何变化：

routes.MapRoute(
    "JpegImages",
    "Images/View/{id}.jpg",
    new { controller = "Images", action = "View" }
);

还有一件事需要检查。形象InputStream。Read（）返回一个整数，它是实际读取的字节数。可能是无法同时读取所有字节，如果数字不匹配，你能记录下来并抛出错误吗？

int bytesRead = image.InputStream.Read(message.ImageData, 0, image.ContentLength);
if (bytesRead != image.ContentLength)
    throw new Exception("Invalid length");

我想知道这是否与X-SourceFiles有关。我正在用MVC做与您完全相同的事情，但我正在数据库中持久化我的字节数组。我不理解的唯一区别是我们的头文件是X-SourceFiles。

以下是关于X-SourceFiles的作用X-SourceFiles标头的作用？它谈到了编码。那么也许呢？？回答者声称这种情况只发生在你的本地主机上。

据我所知，如果您返回一个正确的字节数组，是jpeg，那么您的代码应该运行良好。这正是我成功做到的（没有X-SourceFiles头）。

感谢大家的帮助。我知道这将是一个非常反气候的结局，但我能够"解决"这个问题。我尝试使用相同的浏览器/firebug版本从另一台机器构建代码。奇怪的是，没有出现任何错误。当我回到另一台机器（清除了所有缓存，甚至重新安装了浏览器/firebug）时，它仍然收到错误。更奇怪的是，当我访问其他网站时，Chrome和Firefox都显示了错误。

再次感谢大家的建议！

相关文章：