Electron中如何通过net.request请求图片并返回给渲染进程使用

问题根因 #

你的代码存在两个核心错误导致图片无法正常显示：

1. 响应的data事件可能触发多次，你仅处理了第一个返回的二进制块就返回数据，会导致图片数据不完整
2. 图片为二进制Buffer格式，你使用${chunk}直接将Buffer转为UTF-8字符串，破坏了二进制编码，最终返回乱码数据无法被img标签识别

修复方案 #

1. 主进程代码修改 #

let netInfo = {}
netInfo.host = "***"
netInfo.protocol = "***"
netInfo.method = 'GET'
netInfo.path = "***"

const request = net.request(netInfo)

request.on('response', (response) => {
    // 存储所有返回的二进制块
    const chunks = []
    response.on('data', (chunk) => {
        chunks.push(chunk)
    })
    response.on('end', () => {
        // 拼接为完整的图片Buffer
        const fullBuffer = Buffer.concat(chunks)
        // 转换为img可识别的base64格式data URI
        const contentType = response.headers['content-type'] || 'image/png'
        const imgSrc = `data:${contentType};base64,${fullBuffer.toString('base64')}`
        
        const replyData = {
            apiName: 'get-verify-code-image',
            status: 'SUCCESS',
            data: imgSrc
        }
        e.reply('api-request-reply', replyData)
    })
})
// 必须调用end方法才会真正发起请求
request.end()

2. 渲染进程处理 #

直接将返回的base64数据赋值给img标签的src属性即可：

import { ipcRenderer } from 'electron'

ipcRenderer.on('api-request-reply', (event, res) => {
    if (res.apiName === 'get-verify-code-image' && res.status === 'SUCCESS') {
        document.querySelector('#verify-code-img').src = res.data
    }
})

注意事项 #

• 如果响应头返回的content-type不准确，可手动指定为实际的图片类型，比如data:image/jpeg;base64,、data:image/gif;base64,
• 体积大于1M的图片不推荐用base64传输，会增大30%左右的体积，可通过自定义协议、临时写入本地文件返回路径的方式优化性能
• 不要遗漏request.end()调用，否则请求不会被真正发出

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