应用中使用Blob设置Image的src报错，请求技术修复方案

问题情况 #

运行代码时，尝试通过FileReader结果设置img元素的src，会触发“img src is not valid”错误。替换readAsArrayBuffer为readAsDataURL，或者直接使用URL.createObjectURL(file)，问题依旧存在。

相关代码 #

HTML代码

<input type="file" @change="handleUpdateFIle">

JavaScript代码

const handleUpdateFIle = (e) => {
  const file = e.target.files[0]
  const reader = new FileReader()
  const img = new Image()
  reader.onload = () => {
      const arrayBuffer = reader.result
      const blob = new Blob([arrayBuffer],{type: file.type || 'image/png'})
      console.log('blob', blob)
      const URL = window.URL || window.webkitURL
      const url = URL.createObjectURL(blob)
      img.src = url
      // 控制台输出img.src为 blob:http:xxx
  }
  reader.readAsArrayBuffer(file)
}

控制台错误提示

Uncaught (in promise) img src is not valid

尝试过的无效写法

img.src = URL.createObjectURL(file)

解决办法 #

• 校验文件类型：先确认上传的是浏览器支持的图片格式，避免非图片文件导致报错：

  if (!file || !file.type.startsWith('image/')) {
    console.error('请选择有效的图片文件')
    return
  }
  

• 处理图片加载的异步逻辑：Image实例的src设置后需要时间加载，必须监听加载事件，否则会因资源未就绪触发错误：

  const img = new Image()
  // 监听加载成功事件
  img.onload = () => {
    console.log('图片加载完成')
    // 可在此将图片插入DOM
    document.body.appendChild(img)
    // 释放Blob URL资源，避免内存泄漏
    URL.revokeObjectURL(img.src)
  }
  // 监听加载失败事件，排查具体错误原因
  img.onerror = (error) => {
    console.error('图片加载失败:', error)
  }
  // 最后设置图片src
  img.src = url
  

• 简化代码（可选）：如果不需要操作ArrayBuffer，直接用readAsDataURL更简洁，无需转Blob：

  reader.readAsDataURL(file)
  reader.onload = () => {
    img.src = reader.result
  }
  

• 直接用File生成Blob URL：跳过FileReader，直接用上传的file对象生成URL，减少中间环节：

  const url = URL.createObjectURL(file)
  img.src = url
  

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