赞
踩
重点:"data:image/png;base64,"
- 首先获取从后端返回的base64图片码
- 字符串"data:image/png;base64,"与base64图片码值连接
- 将重新组装的字符串值付给src
//base64Img是后端返回的base64图片码,需要前端自己转成图片
let base64Img = "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"
let srcImg = "data:image/png;base64," + base64Img
<img :src="srcImg" title="这里是title"/>
结果如图所示:
重点:"data:application/pdf;base64"
可以使用iframe显示pdf,也可以使用vue-pdf插件显示pdf,也可以使用pdfJs
<!--basedatapdf为base64编码-->
<iframe :src="'data:application/pdf;base64,'+basedatapdf" width="100%" height="100%">
</iframe>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。