base64编码的图片在HTML的img控件中显示

最近在做一个移动web app项目的开发，将客户经理与客户的聊天功能搬到手机中（类似微信聊天），其中客户经理的头像由原电脑端的聊天项目组同事提供。他们保存在数据库中的图片信息为varbinary类型的数值，也就是以二进制数据保存。自己写了个根据客户经理的ID查找其头像信息的接口（即中台wcf服务），将这个varbinary值读取出来，通过日志中记录的这些值的形式，发现是base64编码的方式。于是就有了之后的研究，就是将base64编码的图片显示的问题：

方法①：控件

>

后台代码GetPhoto .ashx中，将获取到的base64编码的值做如下转换：

        byte [] image = Convert . FromBase64String ( result );

//context.Response.ContentType = "image/png" 看网上别人博客写的一般都会加上这句话，没有加也能显示，具体的原理就不清楚了。

        context . Response . BinaryWrite ( image ); 其中result即为从数据库中获取到的varbinary类型的数据值保存为byte[]类型返回的结果。至此，前端界面的控件调用该后台代码即可显示相应的图片。

（此段可以不看！该项目wcf服务中，接口加上了WebGet方式，就是为了实现通过http方式访问来调用接口，使用restful风格来访问接口。后来项目实际投产过程中，发现js中通过http方式调用接口行不通， 因为外部网络无法直接访问内部的中台wcf服务所在的服务器，这个之前真是没想到啊！！实际就是因为js文件相当于直接下载到本地来执行的，内部的中台服务器不允许开通外网访问的权限（网络限制比较严格）， 所以不能直接访问的，故为了不让之前写的所有接口浪费掉，又在中间包装了一层handler(.ashx)，写下这段也主要是为了引以为戒，做好设计工作很重要，另外估计也会有人疑惑为什么中台又是handler ，又是wcf的。）

方法②：控件

<img src="data:image/png;base64,具体的编码值（即①中的result）">同样可以展示

该方法得益于他人的一篇文章，原文地址：玩转图片base64编码




附：wcf服务的相关笔记

wcf服务中加上webget，就可以用http的方式访问该服务，也是本项目wcf服务采用的做法。 例如：        [OperationContract]        [WebGet(UriTemplate="/QryData/{id}")]        Stream QryData(string ID); 即可通过

http://localhost:×××/Services/×××.svc/QryData/a 来获取a的相关内容。




本人才疏学浅，如有不正确的地方，希望各位大大们批评指正，谢谢！成长的路上，有你们的指点，才会更好。