解决img中不能使用绝对

报错原因

如果页面在服务器上，浏览器出于安全考虑是不允许html访问本地文件的。

解决方案

1、设置映射
2、相对路径
3、读取本地文件，然后返回result
4、通过localhost，本地端口，设置动态url

这里我太菜了，只会第三种

解决方案

使用FileReader读取文件，然后将result返回给src。

function previewFile() {
  const img = document.getElementById('img')
  const file = document.getElementById('file').files[0]; // 使用input，type='file'获取本地文件，也可以通过其他方式，比如createReadStream
  const reader = new FileReader()
// 读取指定文件或Blob对象，读取完成触发loadend事件，同时result属性将包含一个data:URL格式的字符串，表示所读取文件的内容
  file && reader.readAsDataURL(file);
  reader.addEventListener("load", function() {
    img.src = reader.result;
  }, false) 
}

参考文档：
readAsDataURL
FileReader