如何使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,中的图片格式需要根据你自己的图片格式进行修改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值