data:image/png;base64 如何将自己的图片生成Base64编码

最新推荐文章于 2025-01-09 11:04:35 发布
原创 最新推荐文章于 2025-01-09 11:04:35 发布 · 3.9w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何将图片转换为Base64编码，并在HTML和CSS中引用该编码，实现图片的内联显示，适用于资源文件较小的场景，提高网页加载速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

看到图片是这样一串码：

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAMCAYAAAC9QufkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAELSURBVChTdZKxTgJREEUXgomEWFnQGxsa9R+Qwk8wobCzhEhIqChorS2gN7EwFvyCf2Bh6GgstaA1sMu5w2Vxg5zk5s07M5PNbjY5RJqmF6RHHsip9WGyLCszeE+W1BnnL/kic/JOqh7dh+ajlgT1hKPiVqBl3JmvO5BXWhIM3VrnoEv4V7IgdesNiKkXn60K4LvqC+oZx1E0KPSuKzcuQ/5BjqTqb+H6pkbP9wL4E+/m4J7ca1qF/IwNoNYTrt3KwVVo/cQQ38c6lmvkW5ZzZF0A33d/wXFsvQHZIC80SlaB7viOFgV126196N8xcENa1APOj9gC6qHH/ocBvcKY5F+XUn/XuUdMkqwBP3BY37JIuDAAAAAASUVORK5CYII=)

那么如何生成的尼.

 

在在线工具加入小图片自动生成：

https://www.css-js.com/tools/base64.html

 

然后引用时：

// Base64 在CSS中的使用

.box{ background-image: url("data:image/jpg;base64,/9j/4QMZR..."); }

// Base64 在HTML中的使用

<img src="data:image/jpg;base64,/9j/4QMZR..." />

 

浏览器或者＜img src = ““/＞把Base64码转换成图片
hkl_Forever的博客
07-06 8842
3、转换支持 jpeg 格式：data:image/jpeg;base64,+生成的base64码。1、转换支持 png 格式：data:image/png;base64,+生成的base64码。2、转换支持 jpg 格式：data:image/jpg;base64,+生成的base64码。
base64与图片的转换和预览(高阶玩法)
最新发布
weixin_46528266的博客
05-08 2001
base64与图片的转换和预览(高阶玩法)
data:image/png;base64 上传图像将图片转换成base64格式
weixin_34356310的博客
07-21 1万+
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrA...
data:image/png;base64是什么
weixin_30645617的博客
06-01 6190
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFF...
Data URI scheme(转)
weixin_30363509的博客
01-20 510
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如： 1 2 3 4 5 6 7 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXR FWHRTb2Z0d2FyZQBBZ...
data:image/png;base64
weixin_30393907的博客
10-24 1814
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAAr...
浏览器中的data类型的Url格式 data:image/png,data:image/jpeg!
09-25
base64,base64编码的图像数据`：用于插入图像，其中*代表图像类型如gif、png、jpeg等。图像数据需先用Base64编码。 Base64是一种用于将二进制数据转换为ASCII字符的编码方式，使得这些数据可以在基于文本的系统中...
base64 前端显示 data:image/jpg；base64
global_coding的博客
11-27 7757
base64 前端显示 data:image/jpg;base64
Java将前端Data Url (data:image/jpg；base64,)转为数据流
whongliang的博客
07-31 3606
DataURL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。base64,编码形式为base64。dataimage/jpg;声明数据协议及类型名称。/9j/4AAQSkZ……base64编码结果。
Qt Base64数据保存成QImage 踏坑(data:image/png；base64)
qq_35662333的博客
09-11 1224
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。base64,base64编码的png图片数据。
data:image/png；base64 介绍
nbspzs的专栏
01-09 1万+
base64 通过Base64编码将图片数据转换为文本格式，便于在文本环境中存储和传输，适用于网页嵌入、数据库存储等场景，但会增大数据体积并增加解码开销。base64 是一种将图片数据嵌入文本的方式，常用于网页和电子邮件。base64, 表示数据为PNG格式的Base64编码图片。编码过程：将二进制图片数据转换为由64个字符组成的文本字符串，便于在文本环境中传输。字符集：包含 AZ, az, 09, +, /，以及填充字符 =。编码数据：Base64编码的图片数据紧随其后。便于在文本环境中传输和存储。
data:image/png;base64 ?一道关于Data URI Scheme的入门级CTF_Web题
Art_Dillon
03-13 2万+
这是偶尔遇到的某网安交流群的入群题，题目没有任何的提示，直接给了一个txt文件。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANw AAAAoCAIAAAA...
玩转图片Base64编码【我不讲代码】
我从来不认识王先生
02-17 4540
我有一个小案例，我先说出来，大家参考下，日后出问题，不要说是我教的。。。一张小姐姐的图片。。。我不想让明面上让大家看到，但是呢，我又想让大家看到，怎么玩？
将图片转换base64格式，data:image/png;base64是什么？
热门推荐
webxiaoma
04-11 10万+
data:image/png;base64是什么？在代码中我们经常看到图片转换base64格式
Python base64转图片
时越的博客
04-04 6019
import base64 # s='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAABYCAYAAAAp6qMtAAAgAElEQVR4Xu1dB3hUVdo+5947JTPJpBdCKklIgCT0jlKluwoCsq5dFizr2lbFCoptdVkLu6uoK4ouKCIoIiIoICIiVST0hJJG2iSZ1Jm595zzP98594YBIY0Q9H+c5+EJhJk7d+47X3u/9/suRu34YIxh/e0wxpheyFvDsTD
Css中路径data:image/png;base64的用法详解
qq_39229796的博客
12-13 1万+
Css中路径data:image/png;base64的用法详解Data URI scheme总结 原文 今天接触到滑动验证碰到了路径base64： background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2F...
data:image/png；base64,, CTF杂项base64图片隐写-河南省第二届金盾信安杯
半岛铁盒的博客
12-20 4121
下载后得到这个东西 ** data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAASbUlEQVR4nO2bQbJrOxIC3/433T1x/Dt1KYxISmSEpjICDjP/+18ppYTwzy2glFK+pYNVSomhg1VKiaGDVUqJoYNVSomhg1VKiaGDVUqJoYNVSomhg1VKieHrwfr371/P4RkFIrybAOF9pPx6Zj53sCBBnPqcBuF9pPx6Zj53sCBBn
data:image/png;base64转图片
02-25
### 如何将 `data:image/png;base64` 字符串转换为 PNG 图片文件 为了处理给定的 Base64 编码字符串并将其转换成可查看的 PNG 文件，可以采用 Python 中的相关库来完成此操作。以下是具体的方法： #### 使用 Python 脚本解析和保存图像 通过导入必要的模块——`base64`, `io` 和来自 Pillow 库的 `Image` 类，可以从 Base64 编码的数据创建一个有效的图像对象，并最终存储该图像到本地磁盘。 ```python import base64 import io from PIL import Image # 给定的Base64编码字符串 base64_str = "data:image/png;base64,iVB..." # 提取Base64编码部分 image_data = base64_str.split(",")[1] # 解码Base64编码的内容至二进制形式 image_binary = base64.b64decode(image_data) # 创建BytesIO对象用于读写bytes类型的内存缓冲区 image_file = io.BytesIO(image_binary) # 打开图像文件 img = Image.open(image_file) # 保存图像到指定路径下的文件中 img.save("output.png") # 显示图像（这一步取决于操作系统环境） img.show() ``` 上述过程展示了如何从包含 MIME 类型前缀 (`data:image/png;base64`) 的 Base64 数据串中提取实际的图像数据[^1]。接着利用标准库中的工具去除掉非必要字符并将剩余的部分解释回原始字节序列。最后借助第三方图形处理软件包 (Pillow)，能够轻松地加载这些字节数组作为常规图像资源加以操纵或展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值