1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 如何使Base64编码的图片数据在页面上显示

如何使Base64编码的图片数据在页面上显示

时间:2021-07-24 06:00:56

相关推荐

如何使Base64编码的图片数据在页面上显示

在特定的情况下有时候后端会给我们反一些Base64编码的图片数据,例如实现验证码的效果,那么如何将让这种数据转换为图片在页面上渲染呢?大多数人遇到这种情况都会想到转码,其实并不需要那么麻烦,我们只需要将代码代入,浏览器是可以将Base64的编码自动转为图片的,下面是详细的步骤:

首先让我们看看效果是什么样的?

代码片段如下:

<form action="" class="registerBox"><span></span>账号: <input type="text" v-model="phoneNumber" class="user"><span></span>密码: <input type="password" v-model="password" class="password"><div class="layoutBox"><span>验证码:</span><input type="text" class="code" v-model="code"><img :src="`data:image/peg;base64,${useLogon.logonCode}`" alt="验证码" @click="updateCode"></div><el-button type="primary" class="submit" @click="loginHome">登录</el-button></form>

代码中的useLogon.logonCode是类似于这样的代码:"iVBORw0KGgoAAAANSUhEUgAAAPAAAABQCAMAAAAQlwhOAAAAP1BMVEUAAAASDAqCfHo6NDJSTEoPCQfNx8V2cG4tJyWJg4Hs5uQ5MzEcFhRNR0WgmpiyrKrRy8nX0c8bFRN/eXe/ubfo8C8iAAAAAXRSTlMAQObYZgAABMRJREFUeJzsm9ty4jAMhq0OE6bTXjDl/d91p0ti6/D/jh1SSAK6WRJ80GdZsuSy6S1vecvW5efZCjxYfn5ejvjZCuxL9rlcX4t77tMhvr7uIF5Vk2Ui3T2W825BRPqJtymSLArjOgiviDXd/0c5Cl2UACejHBR5ovMvjgpd55XjxKlJPFax7DHNPIYnbeHyKMdzZ8EWrny/bxmt5xBBG8z7/df63SdxX0oBphasGPj7e8vEUO/xVcVF3QYQk25tl1cY76/2FQMD/047CGH8UL09U2DxX424G0dWJ6uvEaQ0IB2Tz0nSrNc/XVRk4pZk/cSf0NnCWyUuO3DSNzZps7Di35CFUeGjH6BhsP6hsR6brN0jZXJS63QpxhzQFbwOAcvnYGxTP2QZdKavGL1STEngwzGB9osXQjUKi7Py2dVaa2dFaeUasu7+FVkD8qxWvOuu5PNzCbGE+XJsiRgtxPDcqVm8TFxLvZEs4lWgNpYCYux28U4LeTW1MFjxBRztYl0nP2EjkUADLOzbgOIj5UzNWbhu4+v1Gt4Nw1DrYjXxoVmknEHiOOgIbgB0TMWIULZS8Geu8PUaiYehh9hTuSiWRHHMElN941Ytw4F7Xi73AofkQsQdUyqYkdzSBHambzVMew3GxUUD3W1h7YImegBh56Q1MW0Vcy9RxHk/uTkBcXjXxSs5SOlIOW40sYvOeSV8JBOBZzG7SKPaSc/nczNWjTgHrhthOYZ1sj9rYYFUYaJ8p5lTWe875oUe8Hxei1itqfXHqU7SOxyPYI4YPlPKTNFl1AWv6EN6bWADYmYttbBWkFZM+Zq6Olmuh92x67N2N/R6wGaBjYGUZuUyBx87ovfmDLG41rjUMl2mTx28H7O8bldZDr1h3ar4UDOTFzr/gLwr1MofH4y4cMZ6OLkrNxPO7ZP7a1JV7PqgBVrhBgjz6qMGmjhp55rcV5L1vaqJL3De+uKsYWIybHZOqzfvUT4m64gE4nLxxKUko1P9BbALkFmFaqIUgkm06ayF7W7GWXcTb+eSGGvoKjRbC00RC5650mZ2ZtC5rR7umVUnM8n/JYWXO1A5HcDa1PxtfdLnHBqyBaKV2DuQj1XEwtTulegD2t54Tyc6U+uNB46wpKXPIeNxRE5HXg63UJedfLK6wEYNJEhRFyaVaqaGpbW5esPdpg047n12u9nsIJH4cjHEWK+AEprMBycTivC3KYR0YKF2/0gwhDhgTIwu2Gz2yPczUBZQi6B9j3y4+9rSDauAK65WW4K5bCSMZNbd5+Duz3N3uXBAnojNSASY+3B2+c7pzYeU0xp1dgs88oOB5ycOpkSrHruQx4I7Hiaz07vcUVw0Fl8PR901feuhrKxZlpqtlvtOnIVvX51OjcQppRQsHKhgYHA+zuzD5pwGnjYV76o9zGsyfegCzl2hO2gDmy+GYTB6VO6G2Wz5n5kz0hRLcFkXANc8cALTcrteVoveFT1S8vfM9aaFlWyGJbx13fyr/8BZj27aBQr0huSV5Qb8CNhRmvPxv5LJwM/WY22hV4od1dKehF8pHlVejfctryHLfmO1X6G/sdr3f7CsCOO947/Q7lNejfe58g4sR5bf0vTFeDt++3QAeQNvS/4FAAD//4N8ESiz+nAxAAAAAElFTkSuQmCC"

注意:src的data:image/peg;base64,中的图片格式需要根据你自己的图片格式进行修改。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。