使用data URI scheme在網頁中內嵌圖片使用介紹

2024-08-30 08:35:17

字體：大中小

來源：轉載

供稿：網友

data URI scheme 允許我們使用內聯（inline-code）的方式在網頁中包含數據，可以在Html、CSS、Javascript 等中使用。

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

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

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

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

下面給出幾個：

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

提供預覽，復制方便。

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

提供預覽，還能生成相應的CSS的URI data。