data:image/jpg; ? ?声明数据协议及类型名称
base64, ? ? ? ? ? ?编码形式为base64
/9j/4AAQSkZ…… ? ?base64编码结果
<img src="data:image/jpg;base64,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" />
“data:image/jpg;base64,/9j/……” 就是一张图片的DataURL,就是利用base64编码把图片数据翻译成标准ASCII字符。
等同于:
<img src=”../images/code.jpg”>
最终的显示结果为: