why blob not working while in new Image src

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

I’m having trouble running the following code snippet in my application. When I try to set the src of an img element using the result of a FileReader object, I get an error saying “img src is not valid”. Can you help me fix this issue?

const handleUpdateFIle = (e: file) => {
  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)
}

console tip

Uncaught (in promise) img src is not valid

I’ve tried using readAsDataURL instead of readAsArrayBuffer, but I still get the same error. Can you please provide a solution?

img.src = URL.createObjectURL(file)