素材巴巴 > 程序开发 >

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

程序开发 2023-09-25 21:47:26

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

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

                               

 代码片段如下:

账号: 密码:
验证码:验证码
登录

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


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。