Python实现图片转Base64并在前端直接显示

巷口听风
巷口听风
发布时间:2026-10-13| 7人浏览过
原创

本文介绍如何使用Python将本地图片文件转换为Base64编码字符串,并在前端HTML中通过img标签直接调用该编码进行显示。示例包含Python读取图片并编码的代码,以及前端HTML中data URI的使用方式,同时对比了编码前后的文件大小变化。

Python图片转Base64实现

具体实现步骤如下所示:


# -*- coding: utf-8 -*-
 
import base64
 
with open("C:\\Users\\user\\Desktop\\20170508134213.png","rb") as f:
  # b64encode是编码,b64decode是解码
  base64_data = base64.b64encode(f.read())
  # base64.b64decode(base64data)
  print(base64_data)

运行上述代码后,控制台输出的结果如下:

由于Base64编码后的字符串长度较长,此处仅展示部分结果,完整内容未全部显示。

前端HTML直接调用Base64显示

接下来探讨在前端HTML中如何直接调用这段Base64编码数据。

在前端HTML中,可以使用img标签的src属性直接嵌入Base64数据。


<img src="data:image/jpg;base64,这里是base64的编码"/>

具体的HTML代码如下,其中src属性包含图片类型及Base64编码字符串,此处代码较长,未全部显示。

最终在浏览器中渲染显示的结果(测试使用的是博客截图)如下:

原截图文件大小为88K,经过Base64编码后存入文件的大小变为117K,体积有所增加。

以上即为Python将图片转换为Base64并实现前端显示的完整流程,希望以上内容能对大家有所帮助,欢迎参考与支持。

免责声明:本文内容仅供参考,不代表本站观点。转载或引用请注明出处。

Python 相关产品和应用

全部下载
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。

scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。

Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。

Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。

pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。

FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架,支持类型提示和自动接口文档。

Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。

Django

Django

6.1.2 · Windows

成熟的 Python Web 框架,适合构建内容站点和业务系统。

Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。

SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。