背景
這久閑來無事給一位客戶測試一款體檢軟件，是winform結構的，其中有一個功能是需要把生成的體檢報告導出為html格式。測試導出后直接在谷歌瀏覽器里查看，體檢詳細內容、醫生簽名、條形碼都能正常顯示。關閉瀏覽器准備進行下一項測試，這時發現導出的就一個html文件，桌面上掃了好幾遍也沒看到醫生簽名和條形碼這兩個圖片文件。心想這怎么能難倒我，也是重新在瀏覽器里打開，按下F12看個究竟。不過看了之后更讓我納悶了，img標簽的src屬性並不是顯示圖片的路徑，而是一大堆字符<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAA...SAAAAABJRU5ErkJggg==" />，內容實在太長中間的"..."省略了大部分。研究了半天也看不出個所以然，但是從base64字樣看得出后面的那堆字符應該是base64編碼的字符串。難道是把圖片編碼為base64？心里一個大大的疑問。接觸html這么久，也做了很多網站，可從未見過這種方式加載圖片，甚至也從沒聽說過，難道是自己out啦！帶着心中的疑問，迅速打開w3cschool找到介紹img標簽的內容，仔細的看了一遍二遍，也沒找到有價值的線索，這東西還真懸乎。看來只能寄希望於百度了，很麻利的輸入關鍵字百度一下回車OK，打開搜索到的第一個鏈接，沒讓人失望就是我要找的答案，仔細閱讀原來真是這么回事。
原來如此
這是什么呢，來掃下盲。Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。在上面的Data URI中，data表示取得數據的協定名稱，image/png 是數據類型名稱，base64 是數據的編碼方法，逗號后面就是這個image/png文件base64編碼后的數據。
下面這幅圖就是就是使用這種方式顯示的，有興趣你可以F12看下代碼哦。
我們可以直接把這串字符粘貼到瀏覽器地址欄里，回車后就能看到圖片。但不是任何瀏覽器對支持，需要IE8及以上、谷歌、火狐瀏覽器才支持。