vue js中解决二进制转图片显示问题
一:问题工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示:<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXV
·
一:问题
工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示:
<img src="https://img-blog.csdnimg.cn/2022010709474136178.jpeg">
二:解决方法
-
js中解决(简单粗暴)
实现方法:在src前添加data:image/jpeg;base64,+已经encode的二进制代码,就可以在网页端显示出图片
以下是用vue实现的代码
this.filePath = 'data:image/jpeg;base64,' + row.imageBlob
<img :src="'data:image/jpeg;base64,'+row.imageBlob" style="width:50%;height:50%" @click="handleLookAt(row)">
2. 如果图片文件多且大,还是选用文件服务器最为稳妥,可以简单的创建一个ftp服务器,后端处理图片存在ftp上,返回一个ftp的地址即可
不过这么长串的二进制字符直接展示在html里实在不是上上之选,希望有条件的话可以让后台进行转码,直接获取src地址才是相对友好的方法。
更多推荐
已为社区贡献17条内容
所有评论(0)