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 编码的图片。

相关文章
|
1月前
|
数据采集 缓存 人工智能
微信 item_search - 关键词取文章列表接口对接全攻略:从入门到精通
本攻略详解基于搜狗微信搜索合规接口的item_search调用方法,涵盖接口认知、密钥获取、参数配置、签名生成、批量采集、异常处理及性能优化,结合Python实操示例,助力开发者高效实现微信文章列表的数据获取与舆情监测、内容聚合等应用,兼顾合规性与生产稳定性。
|
存储 Web App开发 编解码
图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)
图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)
1923 1
|
机器学习/深度学习 自然语言处理 PyTorch
【传知代码】transformer-论文复现
Transformer模型,革新NLP的里程碑,摒弃CNN/RNN,采用自注意力机制解决长距离依赖问题,加速训练。模型包含编码器和解码器,用位置编码补充序列信息。关键组件包括:嵌入层(位置编码增强词向量)、多头注意力层(捕获不同侧面的上下文)、前馈层(非线性变换)及残差连接和层归一化(提升训练稳定性)。Transformer的创新应用,推动了现代大语言模型的发展。
917 1
【传知代码】transformer-论文复现
|
Java 编译器 Maven
@Data@NoArgsConstructor@AllArgsConstructor 这几个常用注解什么意思?
@Data@NoArgsConstructor@AllArgsConstructor 这几个常用注解什么意思?
1479 1
【亲测有效】解决url中&times会被转成×的问题 &timestamp=打印出来是 ×tamp=
【亲测有效】解决url中&times会被转成×的问题 &timestamp=打印出来是 ×tamp=
383 0
|
编解码 Android开发 开发者
dp(相对大小) 和 px(像素)之间的相互转换
dp(相对大小) 和 px(像素)之间的相互转换
358 4
|
存储
tracker_query_storage fail, error no: 28, error info: No space left on device
tracker_query_storage fail, error no: 28, error info: No space left on device
395 0