html 圖片顯示的幾種方式
阿新 • • 發佈：2019-01-09
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，即把圖片資料當成普通資料來傳輸