我们是否*必须*使用data:uri（readAsDataURL）来使用文件对象<；img/>；用JavaScript？

据我所知，当前创建

的常用技术一旦被替换或
视频
元素被删除，则必须使用
revokeObjectURL
手动释放以前的
objectURL

对于
htmlmageelement
上的
属性和
htmlmageelement
不是从
htmlmageelement
派生的属性，是否有相同的方法。不幸的是，在线搜索“没有数据URI的javascript图像文件”只会返回关于
readAsDataURL
的页面，这与我想要的相反。
您设置了它的…
src


document.getElementById（'file'）.onchange=function（）{
if（this.files.length！==0）{
var img=新图像（）；
img.src=URL.createObjectURL（this.files[0]）；
文件.正文.附件（img）；
}
};
在谷歌黑暗肮脏的信息矿井里牺牲了更多的时间后，我在2014年12月的这篇文章中发现了一块煤块，上面说
HTMLImageElement
的
src
属性实际上接受了一个对象URI（呸！）

MDN也在他们的网站上介绍了这一点，尽管有些隐秘：

简而言之，my
showImageFile
函数可以按如下方式更新：

function showImageFile( file: File ): void {

    let rdr = new FileReader();
    rdr.readAsDataURL( file );
    rdr.onloadend = function() {
        let img = document.createElement('img');
        img.src = rdr.result;
        document.body.appendChild( img );
    };
}

或者如果将重复使用
img
元素：

function showVideoFile( file: File ): void {

    let video = document.createElement('video');
    video.srcObject = URL.createObjectURL( file ); // createObjectURL creates a URI alias to the existing file instance in-memory
}

function showImageFile( file: File ): void {

    let objectURI = URL.createObjectURL( file ); // looks like "blob:http://mywebsite/{guid}"

    let img = document.createElement('img');
    img.src = objectURI ;
    document.body.appendChild( img );
}

var img: HTMLImageElement;

function showImageFile( file: File ): void {

    let oldSrc = img.src;

    let objectURI = URL.createObjectURL( file );

    img.src = objectURI;

    if( oldSrc ) URL.revokeObjectURL( oldSrc );
}