html中的img的src可以写二进制流

页面图片渲染的常用做法是 直接在 img 标签内 给 src 附一个 url 地址，交由浏览器去下载、缓存、渲染图片，如下图：

<el-input v-model="loginForm.code"  style="width: 172px; float: left" maxlength="5">
</el-input>
<el-image :src="/a.jpeg" class="captchaImg" @click="getCaptcha">
</el-image>

但这样做就要去做一个图片存储的服务，有些即时性的图片是不需要保存的，就需要前台以二进制流的方式去渲染图片。
如：

<el-input v-model="loginForm.code"  style="width: 172px; float: left" maxlength="5">
</el-input>
<el-image :src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a\r\nHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy\r\nMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoAHgDASIA\r\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA\r\nAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3\r\nODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm\r\np6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA\r\nAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx\r\nBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK\r\nU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3\r\nuLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD0IUGW\r\nJJEjaRFkfOxSwy2OeB3pQK8V+K0OoaF450zX9PuDHNOm2FgANjJwQc8EEMOvqaAPcBUgFePWfxmu\r\nNNWSy8R6JNFqMJ2t5XyAn3VuR+ua39J+L+h6jdJBLBc2u4Eh5ANuByTn0xzQB6MKetc74s1w6JoU\r\nt1C0ZmGAqMfvZYIOegwzrnPbNcd8P7/XtUkN6mqpcRLJtntRtYrliOpxgE+Y3c4UeoFAHq4FSCmL\r\n+GaeWVELuwVVGSScACgCQVItR5C9SB9aZZ3trfxGS1nSVBjLKcjlQw/8dYH8aALS1IBTVqQUAOFS\r\nCvG/GfjXxFrvif8A4RLwSwS4jDfabgHDIVcqRnsBjr70z4a+MPEll47ufBPimc3VyFYxys25gyru\r\nxnuCuTQB7UKKcBRQBxYFc74z8GW3jPTYLWa5e2eCQyJKihuoIwR6dD+FdGKkFAHzZqdl/YXjoxeM\r\n1/tGFlCSzQyHcy7cK/HO4ADg+nfvHY+Fotf8TGz8Kagz2i4ZZL0eXsJ7EfxdOw/Cuq1bSLG1+LV2\r\nfE6A6ZfpIYWkOByABg9iOawprC50v4i2GmadNHPLbzII7iAjM8eRjcBxuAyCe/X3IBofEey8ZfZL\r\ne48UW1rPb24aOK5s5Nq7m/vDvyB2HSrnw+8VeEvCx82/s9TsZ5iGWR1Z4Su3G4Y5J5bnHRq774nR\r\nXcvhyJLaOSWbzVaNUj3r5gztBHvnr2xWt4M0tF8KQW17Z5DoMpcQjJXHAYdyORQByGs/Ea007VLX\r\nUtE1iK/sLgsZ7dpQHXGMfKw3Ko+bjjk1IPF954y8UQ6VpjsNPZWMskbq3ycDBXDA8+uD6Y61R+KF\r\n14e06ODSNN0XTmvn4UR26jYeg4H1PGPyIrkfB+meH9O10ab4tsEmW6C+TKZdqofqpB68f/XoA9h+\r\nIOmTJ4QcWdzPD5QRSIZSuEwVIVe+d2PxHpXn8fjJtP8AhMbWOUR3pKW7EkeaTyjn1GAFUH0Fegzf\r\nCzw+9qy2M2qWWRlfIv5cDuOGJrxe68C6zpPi42Ev2mKO5fyopmCv5u88gE9eMknr7UAeifB3xdf3\r\nGnajHrd7PPJbF2QStlgqqGbOeeMcfjWz4A8Y6/4v8Uag8ksS6NbOyIkUYyxxkZY8/lXk3i6y1n4f\r\n65KLfUpJ/ttuYfPe2VDIuArcAnnpz1Oetd/8MtE8baL4bd9E/wCEfkt55i5+2CZXfgYIZeMY9qAP\r\nRNc0S70/S7qfwhYWMGtXD4M7oAcE5Yljz+HrXmnwxtY9P+KWoQ+KjKfFZUtFIzAxuCuCVPrt6e1U\r\nrzxV8U/C/iWa51DT5L1ZQAsMYZ4AM/w7eh/WjwTpHi3xT8WLTxTrml3FpHFlzI0exRhcBeee9AH0\r\nQBRSiigDjFp60UUAZ2ueHNL8SWX2XU7VJlGdjH7yEjGQe1cPd+DtJ8B65oGs6dG/km++y3Xmtuws\r\noIVvYK2KKKAPVAoOMgHHrUgFFFAGOfCOkN4gGtG3/wBKwM8AgkZG7pnODjrg8ZGQCJtY8KaVrtxb\r\n3F7CxmtzuikRtpVuze+O2cj2oooA2raBbeBIVZ2CjGZHLMfqTyadNaW90F8+FJNuSpZclSRjI9Di\r\niigDF8T+B9F8XQQJqMDCSBgYpojtdADyB7H/AA9K3NK06HStOisoM+XHk5Pcklj+pPFFFAF8CpFF\r\nFFAEi0UUUAf/2Q==" class="captchaImg" @click="getCaptcha">
</el-image>

在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

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

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具。

目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。