Electron中通过Object URL设置图片src不显示问题求助

我之前在Electron 5.x版本里也碰到过几乎一模一样的问题！你的代码里有个很容易忽略的细节——创建Blob的时候，得把你的Uint8Array/Buffer放在一个数组里传进去，而不是直接传buffer本身。

问题根源 #

在Electron 5.x（搭配Node.js 10.x）这个环境下，当你直接将Uint8Array（Node.js的Buffer本质上是它的子类）传递给Blob构造函数时，构造函数会错误地将其视为由单个字节元素组成的数组，而不是完整的二进制数据块。这会导致生成的Blob内部数据结构完全混乱，虽然浏览器能请求到这个Blob URL（所以你看到了200状态码），但数据格式根本不是有效的JPEG，自然无法显示图片。

修正后的代码 #

// 关键：把buffer放在数组中传入Blob构造函数
const imgBlob = new Blob([buffer], { type: 'image/jpeg' })
const imgUrl = window.URL.createObjectURL(imgBlob)
document.querySelector('img').src = imgUrl

额外验证点 #

• 确保你选择的img元素确实存在于DOM中，可以加个判断避免空引用：

  const imgElement = document.querySelector('img')
  if (!imgElement) {
    console.error('找不到目标img元素')
    return
  }
  imgElement.src = imgUrl
  

• 可以在生成Blob后，打印它的大小和本地保存的JPG文件大小对比，确认数据没有丢失：

  console.log('Blob大小:', imgBlob.size) // 数值应和本地JPG文件大小一致
  

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