html中的图片直接使用字符串代替

  • Post author:
  • Post category:其他


最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看代码后发现,里面的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme.

Data URI scheme支持的类型有:

data:,文本数据

data:text/plain,文本数据

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图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

自己做了一个简单的页面,点击查看

测试页面

,大家可以看一下源码.整体上操作如下:


1  base64编码图片

linux下直接可以使用base64+图片路径就可以产生base64编码后的字符串

图片:

使用命令:

  1. base64 android.png


产生的字符串为:

  1. iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAgAElEQVR4nOy9d5xdVbnw/127nTbn
  2. TJ9MSSaZdNIbCRAInQCCiIoiYkHFclX0JzbEhl7Ra8V6RbyKCqKAglKlSAgJKYY00nudPpOZ08ve
  3. e71/nLPLOTNBmvd33897H5icstde5enPs561D/wv/D8N4hW0VYAgUAeE/zXT+V94jTBY+rNf7g0v
  4. hwG02tq6c6qrY00zZsxY2D5+/DJNVRtG9iQA6etQgAQpXhmXAbSODxOrM9m1KY/TqxCy+PoK+/JN
  5. EJDgm4+UojjtVzvRUpfua6lzIUtfl/rrmB5FKDkO7Mi/wv4FSA+nUpTWL6XXubsWGB4e2rx69erH
  6. MplM/9GjR1fyMpjhpZashMPhc+bMmTN90aJFnxsYGBh7+PBhZbQehBRIIX2zKU1UONgBgSjhSCKk
  7. izHKKFL6eM2XB0ikjmKkzufPPx/E6+VkqxiNMaSvb1FCWvFrIYT7sfxG4c5ZSOkRUYoK/vAzu0CW
  8. 1iKc9wKXVRcubabltKcBwcY/LabzUBJRIp4s3T2iZ+HnrVKf0httBM48NBAKhZkwoSObSMQfXL9+
  9. /QM7dux4Ahg6GerUk3xvTJgw4Y1XXfXWWwqmef3+Aweqh4aGRQXTefJYWrDAeZUlbh1JGCGKSJZC
  10. lN77l16EyZMno0W7EOEuZHwqAz0pHI3irN0lXokBS6Lhk2rhIkWUiC0cwghZZILK4V2se304cxS+
  11. Zt6iS4zgrqX0vtTKCOgsfutWAGrDU1n1UKE0b3Fy4vsm47SltCbhLaISq+7NZsGkv79Piw/HZy0+
  12. bfEb6mrrxL59+44DA5V3wegMYMyYMePNF1504U82bd4yJZNJlxABnhIuJ60oje6qKFci/f/6ubuc
  13. mDgLLbXZuTnBovN1bGkyZko3O1ZVV2LfG9tHSFn6XH69+Oqfm1+iywnqMYyz5hHj+VYliuoEIUvk
  14. dMcotn3b/6eS4zhCKDx5+wSymYI7qXLMeFh035dMnsNUFdP0zcWnKxzhKs29r69fr6+rW7ZkyZIx
  15. mzZt2gH0Va5nBAO0trZevnz58ts3b97cIHyGzMeT7mfpfCvK1V5ZI3wSKQTClbASM/kW50odgv6D
  16. LYydfRyJyez549i+vuBr4/RbrorLx69Art+H8A3rrc6RxlI/ZUvxPpf4x0eFkVoC4KyLxkHjSgQw
  17. +OJ57N12oiTFI0nvzL4k4t56xEivp1JhCiHK+pVlPUA6naZQKMxcsmRJZMuWLVuoMAeVDDDj2ndd
  18. +/PNW7a0F9XOSAl2p+tTR0VZGEXdO7iT3mI8IlTqX+9fKSAZzzCx7VSU2r3YWhcROZuuo0kcXehK
  19. tm/BJYy4rOCS0y+WletwJN9d16jOQcWqHMYfTc9BrDrErMtfQABVylwe/V28pHFGzNaHB89v8hhw
  20. tDn42gvh8xNGCqnTvlAwCYaC80LB0PbOzs5tgOVc9Tt1wXPPPfete3bvmVG0a9Jxml1wLVZJYIoD
  21. jmwnvCbeFw6a/NIjhdvI/V54Xu8jf9xHULSha2EmnbMWQ1eL7aVESs/xGhVKDCrdsbx54Rur6MBJ
  22. bw5eK69v4TGSy/dlGgR8q+WiD3QjJKhKkPtus3ztvNl6r9Jzmp0WoyzJxyfF9tJ3v39d3uJL/xcX
  23. 3tfXz+lnnPFNYLq/Xz8DTJ4yZconMpmM1+2IiZS+l0V7j3TsVHkriV9Khf9CRXfSVWFIgZSiLJAE
  24. eOzn9aCoWNLiio/lXWw46t/FjoNcz2EuEl16ERq+78tULT5GGbFu4fbh2OSKq947ARdc2UZBdGHL
  25. AodWL8Is2GVdSp/mcM2rKE20om8/QaVfyoUsu+ZChV9VXJenDffs2dNw/vnnvwkwnFscBlA6OjoW
  26. 7N+/v05K17JXTMYTezd2LmvlkxxnIQ6n+iK+SpB+rhjFJAydyNC1YQESC9PYx9mXdJSP6c7FWTJF
  27. p8xhBD9C3PDUYRbhk2TfWqTvxQkLfSq8bP6uKEpaWmuJTHkWEGiZOWx6vt9tXo4CL3kgy9TkCEly
  28. 8e5h5CRBsSNs0hPeSnmzTJOZM2deB7Q732ml19iSJUsuOXL4cJnH6Q0tveSGi66KebjxvSiq50rv
  29. 1dep29dJGN6JrItaBlY93sW1c2eQFrtpXrCS6JqpJOIZRyy9teP0XSRYXX2EhlaNyVPGIUMHCMUk
  30. dfVVSHUYhMQiCYBCBGErKHYtvb19mOlqkv0xjh0epK8zTypeKNFDlBFCQImAxe+XvWcfmTwYWjX3
  31. /zTr0ctVx84NXi+jhhoOjoUsI7fvrnKkyaI2FkKWckQOm/k8s1K7TCYzFmgG9oHHADXV1dXzZIXT
  32. V2TAEjGc7JObQRkxXW/Iky3KJw0ns3WeVSsqPVlS7/f9CN54o4GUNld8NMNd3yxNx+kQaGuPMnVO
  33. mLHTswSiQ2QLx5BILGsXhhbFBtKyC0WqKFJFVXTAxrTj2NLCpovqMUFgmNj4HO2LA4CKoQbJDFXT
  34. ubeKfVszdB1PuIpHlLjgkqubyeR3AQrbHpsN9Pt8o9KKfMQZmSTzzJmQDvmcQcrx5753rIa/L4cr
  35. RZlOK3UjGRoa0oAa52uHAcJCiFiF6StKk7PICrtV0bTklHl22D8pt530EZ8KDnXaiGIyp3hduFKW
  36. yxbY/8wiJp/zAjmOctoF81j75ACTZ9Qze6lN7dh+8tYRpJRIoZK3dDQthEABLQqIk2S9VFRFLV0L
  37. ed+qodJCbEw7ixJN0ja3QNs8QcCoof9AHZtXFTh+MEvr2FoCY9eAEkT2L2TX1n4fYhxVL1zW9i7i
  38. 4gEXLx7Tjy5GDo6l07XfohSjjYrQWkpP7cbjcSju6QAeAyhSyvI0r+tllk92NJClkTzm8xHfVYOO
  39. c1ZuBSuXJkvc70o3Hs9tfL6b8dOXEGzdwqTTDjBpsQHKfhAS0w6iq1X/dK6vDASgoggVRRigFLFt
  40. mlli4w6z7GpQ7Hr0YDeZbBhVNnPPrwbcRTspciE9Qow2O78/KykllkYVNC+d7syurN0oStVlPMeR
  41. tSV4dPfeOB36PV1X648av1IWF3oqsZK0fpXnkb+YvnXUVslvwFFd7tsyRqmKBVCMLLoaRFUMbCwU
  42. IpQHM/9KKEqmqhioGIDEsocpmAJNDVKIRxFKwkFySYt6VPEnscodO0o+jOPGn8TO+/wnXEapFKZi
  43. I9c/cR0t4ZksH7gM4KZUpXT9lCIBxAg740zIVddeUOpO1AWXKTz/x3HSHEQ4Mb1f7P3hS1UsyKXX
  44. xtDrdyNEH6oSBgTKfxvhTwYCVQmU3kus2BHe/nmTbPccHrmrFzNvn0QhVRDfwfeoDn5Js5Zd9CXT
  45. qCC+z8w4LpsjUSPCcio0gKMmHM6VZZMSXo/+yM0dxMccvmteEF7u/RbvK99Rk57D4Xaz/KpmGqfv
  46. RMoudK2qaNP/R4LAUMNYFNCbNvHmGzX6ts/nmYeOVTZzI5XiG9+ew2hq34kEnH9GdbBL+HUEUDrO
  47. uPRlC31NfVDOAPhI5Aq273bpXioSrIITyxfpefNFdSXKmrnaoLQm4dckQPukKOe/K0HWfBFFi6Ki
  48. j7Lw/3mgoqPqNViY1J2yjqtn1fHs75rpOjYM+Ihf/DQqPT1i+XDoI6TzJ303FPMtlXazUkOMBJ84
  49. FbuV/hk5ouraec+ZcKXUHxU6b6Q3h7IUpv8+4TG0pKTiSqnh5Ve1cNY1hynIBEG99v8a4nsgUNEJ
  50. GbXYJFl6zW7OurSpTJGOshVSel9OAyHLsw/Oa2VOQrr5aY9ZyrWx/24PXAZwJ+eT2/L5SdeLdzOR
  51. ZWZJOG6+f1ojBvSuexhwlL5Q4JrPGNRM3YyuhdFLtv7/XlAw1Ci6HqZ+xhqu/kRjGV4Bn6YtbWKV
  52. 4nXpx2t58xJWpS/TKXzK08csrmsmSuZ2ZBTiMoCbiJC+DkrvXD/StUPOLHwOh690yV1YhVPijeW5
  53. ErIUzDaOiXLd1yQy2EnYqEO8lNQLEMpJzOF/N7yMuajCIBJsJh/YxFs/00806uUbvMylxP1PjkYq
  54. PJVa0tRl2wejju+09XuZ5aD525a7C05+SpZ7p47DV67XXc9eyLKG3p+AYn1b+RgIaG2v4vzrusgV
  55. TIJ6NScL6xQF9KAgWiMIhQ1syyYZN0nFbUyT0XjtXwaqBqGIIFqtohkahZxJfLhANi2wzZHtBSoh
  56. o468FeeNH+/j8TvGMNCXKl0r+Ul+1Pnu9Mdv0hdBjFbG6PiBrv8mKqOuctAqb/dXyoyIAkbT6O4k
  57. ijbcmWB5js+J+731OdfGTgpxzrWdCKljvEQiR9WgtklBJcLGZ/NsXX+MqliIpReNoX1mgf7uPLm0
  58. RL7sethXCQJ0A5paDAZ7DB67K07XkW4mTG5gyUXVNI/L0Xc8R2HU+k8FQ42Rt1Kcfd1enr97Kt2d
  59. qXLZglFwLMro4GxAjdyw8xI

    //izqSHvtgcsAilBwySbwdqnKKi/KCekHN3wcZWp+3nUjGQkt7TWc
  60. fc0BFIKoaqCySxcUDRrG6BzfL/jCOzfSN9jrXvvV9wVXvWceH/r3Bvo6M2Qz8l+qCTQdxowN8Mx9
  61. FrfeuALIla7shpuquOn7szn/qhBdh3OYhVFXg6FWkSfJ0mv38Pc7pnHiRHFTyi94Xm7Ac7xd3DpJ
  62. IX9b55p7axHR5V7ZSNJV6FqP2E6hgvPZZc0yzxI33HO3WisHOokzE4kaLH9fFwjdl0wZHUIRQS4T
  63. 4vpLNpQR35ncfb/ZxK+/eYKGZgP1ZGWurwMoCtQ1qmx8Gm698Vk84juQ5JufWsOOtYKaBg3lpCkL
  64. gaFGEMD51+9B8aO1osrIK7vz1Ur4yFIWbvmLZEQZZ/iHLl/T6PMr37Yoc/Z8X7sZQx+vuNegGHqU
  65. nJwKn5E3fmKQvJnGUEO8FCgK1NQb/P62o0DipO3u/tkWhnqCBCL/OvFXNAgEI/zsK3tfst1tN+3C
  66. CBqoI7IsZb0R0Kox7SxX3uCZAaSXJi/S1XO6y4TKobHjbLvE8I8hyts6ZrxsFqNA+WZEue3wuLBU
  67. SSOd9xVMIjwmcHxGJ2y57AMatkwQMGJQyZIVoKqgKgYbV5+0tL0EBTavGyBa9dLa5LVAKCzoOZzl
  68. 8JGjL9nuwL4+MsM6mvHPmFEhbDRSUI5y0dVRwBMWpLdH6H/x3hYrqJzcSXmJva9hMcniMdBJNUDF
  69. Pr8Y4bH7hy5O1TkEUTbR0iKEf/tTenefdnY7Rv0+gkYdL2cTx4aS3/DSjAJgF6x/xk+vERQs++Vp
  70. mJfrjApUIsEWlObnmT67pfidcPIAfqES5ZLsUNT58148a+1kWQXI0l6PPJkGEEIpqZySE1jJLkWD
  71. 7zKFk9r1rJR/dIfpnIkWR9VUhfal6wkFalHES+pHF6QFkjzT5lT9k5YKsxY3kUqO6nm9LpDLmDSP
  72. C9FQ3/KS7ZpbagnXFDDzL48bFaERDjQx+5LNLq5KaaHie1HK00iPgE6p3YgRREX0JnFD+dEEqSwR
  73. 5O3zCJfjnE6FM+gIleT77JkcnDJGP3tccX0VCBtDfflnS20JQ4MFrr1xPKNsXbhwyVtm0Dw+Tzb1
  74. r/MBzILAJsMHPj/pJdt99JbpWHYBa5R8wOhQdAoz5hCXvbOVCln2IgLH3peuiXLUu23L8j0lR93f
  75. nR/KdXCFLXdvkk5KqJiz9wo5K8yD9DJ7VHDoxKmtULOJkP7yVL8LElIJm5qmLD+4ZxmC2Igmpy2b
  76. wse/1cpAT7aYEPoXgW1Df0+B898W4N0fXzRKC5WPfG4xZ7zBYLCrgP0KchICharAGGhcQVUsUEKc
  77. z3YCzommsu8oaVsn5HO5wRNDv3BWgq8eoNzCe717ExGikpMcFe/zQp3vK5yW067sw1IjKOKVx2mW
  78. Cf2dBaYv1rl/41IeubuXrgM5VENyxoX1LF4eYLA/Qyb1r80BAJg56O/O8e7P1bB0+QU89eceEicE
  79. sVrJxVe3MP4Uk66jmVfFiIrQUVWD867S+et/5XHCKylLBbaVJ4VKhC5LB1ecefNTszxnUASfTvWf
  80. mC229Gr3KsEf/5U+u3ZnpOPYMaWZnFhNld7Kq63eMQvQ21kgFM7zto/FUDUVgSSTNuk5lqaQf/mO
  81. 12sBKSGblnQdytA4QeGDX21yBSAxlKHzkI1p8SoZURDSa0lXb6W6Zibx4Wy5MffhVYB7EFbiVWCP
  82. 9JW9e0dodyqNaqVGdxILI+IHX/0folz4KycpJAuXJ1DU8Mt2/E4GtgmpuCCdzLuj2CVT898NZgGG
  83. +2ziA1kXxa8HAypCRQjBWZdX8chdWU+iKxxyt4rKl1kdvbhAenkaSfl2PxXiWHbJDSGEq4Y8kyTc
  84. KMEt7RulXFwCwaCBWr0XQ6+uHOFVg7SL9ti2+f+F+KPN5fXTPgoBNYrevLH4cRRVXpan8Zfj+cHh
  85. G/9zBcpSw85oTvuyQhDfoQ7XA630IoQ7eDE4KO/aiSJOPbsey7bRXqP0/78EqhqgUMiw8Izxrjl3
  86. zXwpsBf4NbPnvbnFJpXb+ifRlF4Y6C/MLN1xMuFyYtLy4X3gFpjC+Pn9GFqYV2v7/18EUdowap15
  87. EH8E53hk0p8QwMO/dIpyfI6g9FT5yw0DHd/OyQVUskGx55HHOL2pFHewJLqhYWs9qGpwRMv/hZcG
  88. VTUwavpLIXiRgN6pTeEKquuu+yuq3f8qTmmNwgMuAxS3gx1N4B30qrylyExlccfI96VBT5nfgGll