Base64图片页面显示

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

Base64 编码的图片在页面上显示,有两种方法:


1.使用 Data URI scheme


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

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

其中,data URI scheme 的格式为 data:[&lt;MIME type>][;base64],&lt;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图片数据的方式
处理base64图片数据的方式
116 4
|
前端开发
|
5月前
|
缓存 网络协议 前端开发
【高频】从输入URL到页面展示到底发生了什么?
【高频】从输入URL到页面展示到底发生了什么?
|
6月前
|
前端开发
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
517 1
|
6月前
|
前端开发 JavaScript 小程序
前端图片转base64 方法
前端图片转base64 方法
194 0
|
6月前
|
缓存 网络协议 前端开发
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么
157 0
解决el-image中预览图片功能顺序问题
解决el-image中预览图片功能顺序问题
455 0
|
数据安全/隐私保护
批量注册图片,可以根据需要修改data,base64编码
批量注册图片,可以根据需要修改data,base64编码
127 0
批量注册图片,可以根据需要修改data,base64编码
|
小程序
小程序之--动态设置页面标题 wx.setNavigationBarTitle
小程序之--动态设置页面标题 wx.setNavigationBarTitle
小程序之--动态设置页面标题 wx.setNavigationBarTitle