Html中img標簽怎么設置Base64格式圖片源

將圖片轉(zhuǎn)換成base64編碼的切心,在web網(wǎng)上一般用于小圖片上朽寞,不僅可以減少圖片的請求數(shù)量(集合到js挂洛、css代碼中),還可以防止因為一些相對路徑等問題導致圖片404錯誤超营。

示例demo:
Base64.html

<html>

<head>
    <title>測試img顯示Base64圖片源</title>
</head>

<body>
    <img src='data:image/png;base64,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'
    />
</body>

</html>

渲染效果如圖:


001.JPG

應用很簡單鸳玩。一張圖片轉(zhuǎn)化base64格式后就會生成一堆字符串,直接應用是不行的糟描,必須在前面加上相應的說明“data:image/png;base64,”怀喉,否則,無法正常顯示船响。
一般的在線轉(zhuǎn)化工具生成的圖片Base64格式字符串都是包含這些頭信息的,粘貼上去直接就能使用躲履。

附:

    data:text/plain,文本數(shù)據(jù)

    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圖片數(shù)據(jù)

    data:image/png;base64,base64編碼的png圖片數(shù)據(jù)

    data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)

    data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末见间,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子工猜,更是在濱河造成了極大的恐慌米诉,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件篷帅,死亡現(xiàn)場離奇詭異史侣,居然都是意外死亡拴泌,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門惊橱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蚪腐,“玉大人,你說我怎么就攤上這事税朴』丶荆” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵正林,是天一觀的道長泡一。 經(jīng)常有香客問我,道長觅廓,這世上最難降的妖魔是什么鼻忠? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮杈绸,結(jié)果婚禮上帖蔓,老公的妹妹穿的比我還像新娘。我一直安慰自己蝇棉,他們只是感情好讨阻,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著篡殷,像睡著了一般钝吮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上板辽,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天奇瘦,我揣著相機與錄音,去河邊找鬼劲弦。 笑死耳标,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的邑跪。 我是一名探鬼主播次坡,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼画畅!你這毒婦竟也來了砸琅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤轴踱,失蹤者是張志新(化名)和其女友劉穎症脂,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡诱篷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年壶唤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棕所。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡闸盔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出橙凳,到底是詐尸還是另有隱情蕾殴,我是刑警寧澤,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布岛啸,位于F島的核電站钓觉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏坚踩。R本人自食惡果不足惜荡灾,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瞬铸。 院中可真熱鬧批幌,春花似錦、人聲如沸嗓节。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拦宣。三九已至截粗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鸵隧,已是汗流浹背绸罗。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留豆瘫,地道東北人珊蟀。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像外驱,于是被迫代替她去往敵國和親育灸。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容