Base64图片页面显示

将 Base64 编码的图片在页面上显示，有两种方法：

1.使用 Data URI scheme

Data URI scheme 是一种将小容量数据直接嵌入到文档中的技术。将 Base64 编码的图片数据直接嵌入到 img 标签的 src 属性中，如下所示：

<img src="data:image/png;base64,iVBORw0KGg..."/>

其中，data URI scheme 的格式为 data:[<MIME type>][;base64],<data>，其中 MIME type 表示数据的类型，比如 image/png 表示 PNG 图片，base64 表示数据使用 Base64 编码，接着是实际的编码数据。

2.使用 JavaScript

可以在 JavaScript 代码中动态创建一个 Image 对象，然后将 Base64 编码的图片数据赋值给它的 src 属性，最后将这个 Image 对象添加到页面中。

var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGg...";
document.body.appendChild(img);

这样就可以将 Base64 编码的图片在页面上显示出来了。需要注意的是，如果图片太大，可能会导致页面加载速度变慢，因此不建议在页面中大量使用 Base64 编码的图片。

Base64图片页面显示相关推荐

uniapp 之 Base64图片的显示问题以及保存到相册
目录一.base64 图片显示问题二.base64 图片保存到相册一.base64 图片显示问题 uniapp 官网明文指出 image 标签的 src 支持base64 码: 但是 ...
图片无法显示 base64图片无法显示图片体积过大无法显示
图片体积过大在vue项目中,经常使用webpack或其他打包工具,但因打包工具对图片的引入经常有大小限制,所以导致图片无法加载,一般来说,图片超过20kb就容易无法显示,此时应使用require引入 ...
vue base64图片不显示_技巧 | word中插入的图片显示不完整怎么办？
已经好久没有更新了,都快忘记有这个公众号存在了~ 这几个月发生了很多事情,工作上的任务也迟迟没有减轻,之前保持的日记也已经很久没有写了.但是觉得要是没有什么用什么方式将脑袋中时不时飘过的念头记录下来的 ...
微信小程序中base64图片的显示与保存
当我们拿到如下base64格式的数据时: 显示使用image标签,src属性添加data:image/png;base64, (注意:若imgData返回数据中含有data:image/png;ba ...
vue 上传图片 base64图片无法显示的问题
后台返回的base64无法显示的原因原因一: 返回的base64中存在换行和空格, 这样前端直接渲染的话就显示不出来解决办法: let strss = `data:image/jpg;base64 ...
SSM上传用户头像。解决HTTP 400,保存到本地以及数据库保存路径，在页面显示的问题
第一次用SSM上传用户图片,遇到很多问题,这里逐一记录: 1.保存到本地某个文件夹 2.在页面显示图片 3.报错HTTP 400 bad request 用maven搭建的项目,结构如图: 主要是实体 ...
手机php网站不显示图片,javascript,_手机页面用innerHTML拼接的图片不显示，javascript - phpStudy...
手机页面用innerHTML拼接的图片不显示测试代码 input,button{ height:35px; } add function addEmotion(t){ alert(t); } var ...
【小程序】关于图片上传和在页面显示问题
最近在工作中遇到一个关于图片上传的问题.根据之前项目的经验,我知道目前这个公司上传图片有两种方式, 一种是把图片上传到公司服务器上,然后把图片放在服务器上的地址存在数据库中,要获得图片的时候直接从库中 ...
img src 引入base64格式数据显示图片
看到公司项目里用 base64 传输数据到页面! 其中 jsp这么写的: <td><c:choose> <c:when test="${photo ...

Base64图片页面显示

Base64图片页面显示相关推荐

最新文章

热门文章