了解一下原因的image对象，以前对于原生的这种image最多在于创建 调用,并未知道其中含义，如今做东西基本用组件，更不知其中含义了，这对于一个码农来说，是可耻的。

// 摘自官方文档:
        
 <img> 标签每出现一次，一个 Image 对象就会被创建。

//粗看官方文档里image定义的属性 方法

https://www.w3school.com.cn/jsref/dom_obj_image.asp

//重点来了 跟我学image == 基本



        var img = new Image(); //创建image对象
        img.onload = function () {
            console.info('加载成功');
        }
        //先绑定事件，然后指定地址
        img.src = '../img/images/2.jpg';
        document.body.appendChild(img);
        console.info(img);

// 升级

 const res = await this.getBase64(url) // 这种方案是将网络图片转换为base64格式再做背景显
//示处理，缺陷是对png格式处理不了

// 将网络请求的图片转换成base64字符
    getBase64(url) {
      return new Promise((resolve, reject) => { //同步
        var Img = new Image()
        var dataURL = ''
        Img.setAttribute('crossOrigin', 'Anonymous')
        Img.src = url + '?v=' + Math.random()
        Img.onload = function() {
          // 要先确保图片完整获取到，这是个异步事件
          var canvas = document.createElement('canvas') // 创建canvas元素
          var width = Img.width // 确保canvas的尺寸和图片一样
          var height = Img.height
          canvas.width = width
          canvas.height = height
          canvas.getContext('2d').drawImage(Img, 0, 0, width, height) // 将图片绘制到canvas中
          dataURL = canvas.toDataURL('image/png') // 转换图片为dataURL
          resolve(dataURL)
        }
      })
    },