图片标签的四种路径
img src的四种类型:
- 网络地址:https://www.baidu.com/img/flexible/logo/pc/result@2.png
- 相对地址:../../imgs/test.png
- base64地址: data:application/octet-stream;base64,
- blod地址:blob:https://mdn.github.io/3eac363f-add5-4d82-9e73-db5880437a67
文件转成blob: window.URL.createObjectURL
var file = document.querySelector('input[type=file]').files[0]; img.src = window.URL.createObjectURL(file);
文件/blob转成base64: new FileReader() 读取指定的 Blob 或 File 对象
var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { img.src = reader.result; }, false); if (file) { // 文件转成base64 reader.readAsDataURL(file); // blob转成base64 // var blob = window.URL.createObjectURL(file); // reader.readAsDataURL(blob); }