前端预览图片，用Base64和objectURL哪个更好

Question

我现在有10张图片，平均1.5mb 大小，我现在用input file一次性选中它们，并且使用img标签显示出来。
我是把它们弄成base64好呢？还是用ObjectURL好？（运行环境仅限于Chrome最新版，不考虑其他因素）后续我还需要把这10张图片打包成zip下载下来(使用jszip插件)，整个过程完全前端操作不与后台交互。这是我的测试代码input.onchange = function(e) {     [...this.files].map(file => {        const img = new Image();        // 方案1 ObjectURL         img.src = window.URL.createObjectURL(new Blob([file], {type: file.type}));        document.body.appendChild(img);                 // 方案2 Base64         const reader = new FileReader();         reader.onload = function(e) {             img.src = e.target.result;            document.body.appendChild(img);         }         reader.readAsDataURL(file);     }); }这是我简单测试几次后，取了一个感觉像平均值的结果（左边方案1，右边方案2），看样子应该是ObjectURL的方案更好些？但如果考虑上我后边所说的需求呢？或者说我把图片的数量加到100张？另外渲染和绘制工作base64要好于ObjectURL这个又要怎么理解？

Answer 1

建议用dataURL