关于数据库保存的二进制图片无法在colorbox插件中显示的解决办法

colorbox是非常优秀的图片显示插件，但最近想用它来显示保存在数据库中的二进制图片却发现问题，就是无法正确显示，显示出来的都是一些乱码字符，究竟问题出在那呢？

于是循例百度了一下，是有人也碰到这个问题，但没有提出解决方案呀！看来只能自己分析原因了。。。

首先说下我的开发环境：ASP.NET MVC+COLORBOX，那问题不是出在MVC就是COLORBOX上了。

1、MVC分析：

无论图片保存数据库还是保存在目录文件，都是无非转换为二进制流返回比浏览器，于是我试下用COLORBOX显示保存在某个目录下的图片，输入测试网址：http://localhost:6234//Images/010806cjierech73n727j2.jpg，结果是完全问题呀！于是再通过浏览器输入网址：http://localhost:6234/Mminfor/GetThereImageToView/34251，显示保存在数据库中的图片，也完全没问题呀！

因此，问题出在MVC上的可能性不大。

2、COLORBOX分析：

为什么直接在浏览器上显示没问题，而在jqurey上的插件COLORBOX显示就出问题呢？

首先从HTTP的响应头入手分析吧。

直接显示保存在目录文件下的HTTP响应头如下：

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Sun, 14 Sep 2014 07:44:00 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: public
ETag: "1CFCFEF4F346180"
Content-Type: image/jpeg
Content-Length: 155988
Connection: Close

而显示保存在数据库中的二进制图片的HTTP响应头如下：

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Sun, 14 Sep 2014 07:46:03 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 4.0
Content-Type: image/jpeg
Content-Length: 155988
Connection: Close

从对比来看，二者的区别是一个响应头标识：ETag。于是用Response.AppendHeader方法把这个头标识加上再测试，但还是不行呀（后来百度了一下，“ETag”这个标识头是用于缓存的）。

既然响应头没发现到问题，于是再从发送头分析吧！

直接显示保存在目录文件下的HTTP发送头如下：

GET http://localhost:6234/Images/010806cjierech73n727j2.jpg HTTP/1.1
Host: localhost:6234
Connection: keep-alive
Accept: image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Referer: http://localhost:6234/Mminfor/EditForumData
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4

而显示保存在数据库中的二进制图片的HTTP响应头如下：

GET http://localhost:6234/Mminfor/GetThereImageToView/34617 HTTP/1.1
Host: localhost:6234
Connection: keep-alive
Accept: text/html, */*; q=0.01
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Referer: http://localhost:6234/Mminfor/EditForumData
Accept-Encoding: gzip,deflate,sdch

我靠！终于发现问题了：

二者的区别原来在这个发送头标识：Accept，既然找到问题所在，剩下的问题就是如何把发送头标识Accept变为：Accept: image/webp,*/*;q=0.8的问题了。

下面是我解决该问题的一个方法（也许不是好方法，但大家可以参考一下）：

把显示图片的原来网址：http://localhost:6234/Mminfor/GetThereImageToView/34617改为：

http://localhost:6234/Mminfor/GetThereImageToView/34617.jpg（当然你要显示的图片格式是gif、png、bmp也可改为对应的），至于服务器端如何提取参数值“34617”我就不再累述了（无法是字符串截取、类型转换嘛）。

为什么在网址后面加个“.jpg”扩展名就能把“Accept”标识头变为：Accept: image/webp,*/*;q=0.8了呢？我认为是浏览器的智能判断该网址的目的就是获取图片的吧，于是就把“Accept”标识头变为：Accept: image/webp,*/*;q=0.8了，这样图片二进制数据返回后COLORBOX就知道按图片而非字符来显示了。

从另一角度来看，这也算是COLORBOX要改进的一个地方吧，因为它没有浏览器那么智能，能通过返回的二进制流（文件头）来判断究竟该显示图片还是字符。