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

相关文章
|
关系型数据库 MySQL 数据库
找不到请求的 .Net Framework Data Provider。可能没有安装
做的一个项目,框架为.net framework 数据库为mysql 出现如标题错误 检查是否安装mysql、是否安装mysql connector net 笔者是因为没有安装后者mysql connector net 下载地址: [mysql connector net](https://downloads.mysql.com/archives/c-net/ "mysql connector net") 笔者安装截图如下: ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/c
597 0
|
2月前
|
人工智能 缓存 安全
中国企业接入Google Nano Banana模型的解决方案技术解析
Google Nano Banana模型在多模态领域表现优异,但国内应用面临延迟高、中文理解偏差及合规难题。穿扬科技作为官方合作伙伴,提供低延迟加速、中文语义增强、电商色彩管理与合规支持,成为企业级接入首选;laozhang.ai和FastGPTPlus则更适合低成本、轻量级应用场景。
306 0
|
2月前
|
数据采集 缓存 人工智能
微信 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等)
1989 1
|
机器学习/深度学习 自然语言处理 PyTorch
【传知代码】transformer-论文复现
Transformer模型,革新NLP的里程碑,摒弃CNN/RNN,采用自注意力机制解决长距离依赖问题,加速训练。模型包含编码器和解码器,用位置编码补充序列信息。关键组件包括:嵌入层(位置编码增强词向量)、多头注意力层(捕获不同侧面的上下文)、前馈层(非线性变换)及残差连接和层归一化(提升训练稳定性)。Transformer的创新应用,推动了现代大语言模型的发展。
1033 1
【传知代码】transformer-论文复现
|
Java 编译器 Maven
@Data@NoArgsConstructor@AllArgsConstructor 这几个常用注解什么意思?
@Data@NoArgsConstructor@AllArgsConstructor 这几个常用注解什么意思?
1565 1
|
编解码 Android开发 开发者
dp(相对大小) 和 px(像素)之间的相互转换
dp(相对大小) 和 px(像素)之间的相互转换
391 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
409 0