使用data URI scheme在網(wǎng)頁(yè)中內(nèi)嵌圖片使用介紹

2024-08-30 08:35:17

字體：大中小

供稿：網(wǎng)友

data URI scheme 允許我們使用內(nèi)聯(lián)（inline-code）的方式在網(wǎng)頁(yè)中包含數(shù)據(jù)，可以在Html、CSS、Javascript 等中使用。

data URI scheme 經(jīng)常用來(lái)將圖片嵌入網(wǎng)頁(yè)，使用如下：
<img alt="鶴沖天的頭像（您的瀏覽器不支持 data URI scheme，圖片無(wú)法顯示）" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBD/*此處省略很多數(shù)據(jù)*/NONPmfvcqcdZR7XT27n//2Q%3D%3D"/>

data URI scheme 格式如下：
data:[<MIME-type>][;base64],<data>

這個(gè)格式比較簡(jiǎn)單，對(duì)照一下可得知，上面的 img 是一個(gè)使用 base64 編碼的 jpg 圖片。
將這個(gè) img 嵌入到本頁(yè)面中，顯示如下：
鶴沖天的頭像（您的瀏覽器不支持 data URI scheme，圖片無(wú)法顯示

鶴沖天的頭像（您的瀏覽器不支持 data URI scheme，圖片無(wú)法顯示

除了%20base64%20編碼，還可以使用%20%xx%20形式的%2016進(jìn)制URL編碼，如下：%20<img%20alt="鶴沖天的頭像（您的瀏覽器不支持%20data%20URI%20scheme，圖片無(wú)法顯示）"%20src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此處省略很多數(shù)據(jù)*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>%20_fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此處省略很多數(shù)據(jù)*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>"%20_fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此處省略很多數(shù)據(jù)*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>"%20生成圖片數(shù)據(jù)%20根據(jù)上面的格式，我們可以編寫一個(gè)小程序進(jìn)行生成，但我們不需要這么麻煩，有很多網(wǎng)站提供這種（免費(fèi)）服務(wù)。

下面給出幾個(gè)：

1.http://dataurl.sveinbjorn.org/dataurlmaker

提供預(yù)覽，復(fù)制方便。

2.http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

提供預(yù)覽，還能生成相應(yīng)的CSS的URI data。