如何在 HTML 中嵌入 base64 图像？

要嵌入用 Base64 编码的图像，请使用 img 元素。这可以防止页面加载缓慢，并让 Web 浏览器无需再发出 HTTP 请求。

将 base64 图像设置在 <img> 的 src 属性中。比方说，我们有以下图像 −

注意 − 图像越大，其 base64 代码就越多

对于 Base64，我们将考虑图像的数据 URL，它位于 src 属性中。数据 URL 有两部分 −

  • 第 1 部分是 Base64 编码的图像。
  • 第 2 部分是图像的 Base64 编码字符串。

因此，上述图像的 Base64 如下 −

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAw
MEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGB
IUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUF
BQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAuADUDASIAAhEBAxEB/8QAH
wAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF
9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY
3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmq
KjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAH
wEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQ
J3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJy
gpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZ
aXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb
3+Pn6/9oADAMBAAIRAxEAPwD9EKKKKACq+oXyadZy3Eiu6xjO2NdzHnAA/HueB1JAqxTZI1mj
ZHUOjDaysMgg9QafqIzrHxHY30yweabe6LFPs1ypik3AZIAP3uOcrkEcgkc1p1i2ul2+p6XNYX0f2
uKNjBlySGCn5WHOQwBHzDB3DOeBTPD9xcWd5daNeztdS26rLb3Eh+eWBiQN3q6kFSe42se
WIFuK1sQpPS5u0UUVmaBRXj/wn+IuoroeszeKtQF20enx+I7eXaoK2MqufLwoGSjRODx/EtHgf4
haz4d0fxBJ4zklvLmz1q2tpTCqAWaXSQMgPTKRtMATyeCea6Xh5ptdjkjiYNRff8PU9gorlNf8YTx
3Wv6RpFnNc6xp+mJfK2wNGWkMiogGclv3THGOmPWq+l67a6f4Z1PW7fXLrXYreB5XhuTGCki
gkqQqBkPbaeB6V4mIx1PDV/Y1F9nmb02187vbWydtL7o9mhhJ4il7WD+1y213/JeV99exsxaPfQ
+IPti33/EvSN0WyUYDtI4Z3f1ZSo246BnBzkEL4ksU8uPVBdS2U+nK8omijMuY8ZdGQDLqdoOB
zlVxzXN6o2t+HfDqeIpdYmu7qERz3diyILZ4yRvRBt3KQCdrZJJAznNbmh6jc3XirxFbyTNJbW/2by
IyBhN0ZLY78n1rGlm0Z1oUZ03GUrWTts4zkno3/JJNb38tTSplrjSlUhNSir9904prVL+ZNdLeZo6H
qbatp6XLRGNW+4/G2VcAiReSQpB6HkfqSrNpY29grrbQpAjuZGWNdoLHknA7k8n1NFey7X0P
MV7ankM/wh1e40b4eWyvDC1jZJpWuxswbzrPEbvGDj5vnhVOO0jH1zqa54Nj874nya/c2un6Br9t
AkV3NMq7CtsyOxzjbtIUj6Zr1Gq19ptnqiRpeWsF2kciyos8YcI46MMjgjsa6Pbyb1/rW5y/V4Jaf1pY
8/8AhDb6xdeGb3xXqVkkev6+Ibj7LK5jCRRxLHErHBK7gGkxjIMpBHFX5vCd34m1e/u7ywi0SK50
6awl8uVZZbgvtw77RjCYOOSfm7V3VFeRjsHTzCadZvlX2dLeWtub7mvPqerg8TPAwapL3v5tb+f
W33p+XQ891qPxBeeGYtI1PSc248qK+vLGXzjJEpBYxxYDEsFxjGV3cbsVqx2usaT4t1a6t9MS9s
79rfEouVjMYRArHaRz1J/CutorzllCU1U9tLmVrP3brlUlb4bNWm91e7vc73mTcHD2UbO9171ndxd
973vFdbeQyNnZnDoFAPBBzkUU+iveSsrXPHep/9k=

示例

让我们看看完整的示例 −

<!DOCTYPE html>
<html>
<head>
   <title>Base64 Image</title>
</head>
<body>
   <div>
      <h1>MySQL</h1>
      <img src="
      data:image/jpeg;
      data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQ
      gFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQM
      EBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFB
      QUFBQUFBQUFBT/wAARCAAuADUDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAw
      QFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS
      0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXq
      DhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er
      x8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBA
      cFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygp
      KjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoq
      OkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMB
      AAIRAxEAPwD9EKKKKACq+oXyadZy3Eiu6xjO2NdzHnAA/HueB1JAqxTZI1mjZHUOjDaysMgg9QafqIzrH
      xHY30yweabe6LFPs1ypik3AZIAP3uOcrkEcgkc1p1i2ul2+p6XNYX0f2uKNjBlySGCn5WHOQwBHzDB3DO
      eBTPD9xcWd5daNeztdS26rLb3Eh+eWBiQN3q6kFSe42seWIFuK1sQpPS5u0UUVmaBRXj/wn+Iuoroesz
      eKtQF20enx+I7eXaoK2MqufLwoGSjRODx/EtHgf4haz4d0fxBJ4zklvLmz1q2tpTCqAWaXSQMgPTKRtMA
      TyeCea6Xh5ptdjkjiYNRff8PU9gorlNf8YTx3Wv6RpFnNc6xp+mJfK2wNGWkMiogGclv3THGOmPWq+l67
      a6f4Z1PW7fXLrXYreB5XhuTGCkigkqQqBkPbaeB6V4mIx1PDV/Y1F9nmb02187vbWydtL7o9mhhJ4il7W
      D+1y213/JeV99exsxaPfQ+IPti33/EvSN0WyUYDtI4Z3f1ZSo246BnBzkEL4ksU8uPVBdS2U+nK8omijMuY
      8ZdGQDLqdoOBzlVxzXN6o2t+HfDqeIpdYmu7qERz3diyILZ4yRvRBt3KQCdrZJJAznNbmh6jc3XirxFbyTNJ
      bW/2byIyBhN0ZLY78n1rGlm0Z1oUZ03GUrWTts4zkno3/JJNb38tTSplrjSlUhNSir9904prVL+ZNdLeZo6H
      qbatp6XLRGNW+4/G2VcAiReSQpB6HkfqSrNpY29grrbQpAjuZGWNdoLHknA7k8n1NFey7X0PMV7ank
      M/wh1e40b4eWyvDC1jZJpWuxswbzrPEbvGDj5vnhVOO0jH1zqa54Nj874nya/c2un6Br9tAkV3NMq7Ct
      syOxzjbtIUj6Zr1Gq19ptnqiRpeWsF2kciyos8YcI46MMjgjsa6Pbyb1/rW5y/V4Jaf1pY8/8AhDb6xdeGb3x
      XqVkkev6+Ibj7LK5jCRRxLHErHBK7gGkxjIMpBHFX5vCd34m1e/u7ywi0SK506awl8uVZZbgvtw77RjCYO
      OSfm7V3VFeRjsHTzCadZvlX2dLeWtub7mvPqerg8TPAwapL3v5tb+fW33p+XQ891qPxBeeGYtI1PSc248
      qK+vLGXzjJEpBYxxYDEsFxjGV3cbsVqx2usaT4t1a6t9MS9s79rfEouVjMYRArHaRz1J/CutorzllCU1U9tLm
      VrP3brlUlb4bNWm91e7vc73mTcHD2UbO9171ndxd973vFdbeQyNnZnDoFAPBBzkUU+iveSsrXPHep/9
      k=
      " alt="MySQL" />
   </div>
</body>
</html>

输出

更新于： 2022 年 11 月 01 日

7000+ 浏览量

启动你的职业 生涯

完成课程即可获得认证

开始
广告
© . All rights reserved.