Eel模块开发Python程序时调用eel.getImgSrc返回null问题排查

Eel 依赖 JSON 格式完成 Python 端与 JavaScript 端的跨进程数据传输，JSON 本身不支持二进制类型序列化：你在 Python 端 getImgSrc 函数返回的是 bytes 类型的文件二进制数据，Eel 无法完成序列化转换，因此前端收到的返回值为 null。
此外当前代码直接使用 open 打开文件后未主动关闭，会产生文件资源泄漏的隐患。

方案1：二进制转Base64字符串传输（通用方案） #

将图片二进制内容编码为 Base64 字符串后返回，JSON 可直接序列化字符串类型，前端拿到后可直接用于图片渲染等场景，代码修改如下：

app.py 修改后代码 #

import base64
import eel

@eel.expose
def getImgSrc(path):
    # 用with上下文管理器自动关闭文件，避免资源泄漏
    with open(path, 'rb') as f:
        img_bytes = f.read()
        # 二进制转base64编码字符串
        return base64.b64encode(img_bytes).decode('utf-8')

main.js 修改后代码 #

async function run(path) {
    let base64Img = await eel.getImgSrc(path)()
    console.log(base64Img);
    // 若需直接渲染图片，补充对应格式前缀即可，示例为png格式，jpeg可替换为image/jpeg
    // document.querySelector('#showImg').src = `data:image/png;base64,${base64Img}`
}

方案2：直接返回本地路径（仅前端渲染图片场景适用） #

如果不需要对图片字节做业务处理，仅需要在前端渲染，可直接返回图片的本地绝对路径，前端拼接 file:/// 前缀即可加载，性能更高无转码开销：

app.py 对应代码 #

import os
import eel

@eel.expose
def getImgSrc(path):
    # 返回绝对路径
    return os.path.abspath(path)

main.js 对应代码 #

async function run(path) {
    let localPath = await eel.getImgSrc(path)()
    console.log(localPath);
    document.querySelector('#showImg').src = `file:///${localPath}`
}

内容的提问来源于stack exchange，提问作者Giant Brain