html 图片显示的几种方式

1，直接访问：<img src="xxx/123.png">

2，间接访问：<img src="./request.rsp?opt=capture">

需要CGI配合，返回的数据为图片数据

重点在这：Content-type: image/jpeg

3，直接给数据：<img src="data:image/png;base64,ABKAMNDKSJFHVCJSNVOIEJHVUEHVUV==">

说明：

data:,                                           文本数据
data:text/plain,                             文本数据
data:text/html,                              HTML代码
data:text/html;base64,                 base64编码的HTML代码
data:text/css,                               CSS代码
data:text/css;base64,                  base64编码的CSS代码
data:text/javascript,                     Javascript代码
data:text/javascript;base64,         base64编码的Javascript代码
data:image/gif;base64,                base64编码的gif图片数据
data:image/png;base64,              base64编码的png图片数据
data:image/jpeg;base64,             base64编码的jpeg图片数据
data:image/x-icon;base64,          base64编码的icon图片数据

js 原生支持 base64 编解码

window.btoa("test")；//"dGVzdA=="
window.atob("dGVzdA==");//"test"

-----------以下为猜想，未验证----------

有的时候，不一定能成功获取到图片数据，有可能会返错，为了区分错误信息和图片数据，可以把 2,3 结合一下

<img id="img0" src=""></img>

$.ajax({type:"GET", dataType:"text", url:"./request.rsp?opt=capture", success:function(data){$("#img0").attr("src", "data:image/jpeg;base64," + window.btoa(data));}});

在CGI输出函数中，指定 Content-type: text/xml，即把图片数据当成普通数据来传输