The url.createObjecturl () static method creates a DOMString with a URL representing the object given in the argument. The lifecycle of this URL and the Document binding in the window that created it. This new URL object represents the specified File object or Blob object.

grammar

objectURL = URL.createObjectURL(object)
Copy the code

usage

// HTML
  <input type="file" id="inp">  <img id="oImg" src=""/>

// js    
document.getElementById("inp").onchange = function(event){      
    let file = this.files[0]      
    let url = URL.createObjectURL(file)      
    document.getElementById("oImg").setAttribute("src",url)    
}
Copy the code

Pay attention to

Every time the createObjectURL() method is called, a new URL object is created, even if you already created it with the same object as an argument. When these URL objects are no longer needed, each object must be freed by calling the url.revokeobjecturl () method.

Browsers automatically release documents when they are uninstalled, but for best performance and memory usage, you should actively release them when it is safe to do so.