项目中很多的资源图片是要通过接口获取过来，而且不是图片的路径是以数据流的形式返回给前端的，那么前端如何拿到图片的信息呢，现在简单介绍一下：

1.设置一个图片，并给src赋值为imgSrc:

<img :src="imgSrc"/>
...

 data() {
    return {
    ...
    imgSrc=''
  }
}

...

2.定义api来获取图片(其中http是对axios的二次封装)

// 接口信息如下：
export function getImage (params) {
    return http({
        url: 'xxx',// 获取图片的接口的地址
        method: 'get',
        params: params,
        responseType:'blob'
    })
}

3.页面引用接口，并在created或者其他地方使用接口获取图片信息，这样页面就能显示图片了。这里只是简单的介绍，如果不清楚图片的type,还需要从response的header中获取图片的名称类型等信息，然后再进行处理。

 getImage(option).then(res=>{
    // 注意：res是Blob对象
        if(res){
            // 1方式
            const myBlob = new window.Blob([res], {type: 'image/jpeg'})
            const qrUrl = window.URL.createObjectURL(myBlob)
            // 2方式
            const qrUrl = window.URL.createObjectURL(myBlob)

            this.imgSrc = qrUrl
        }
      })

        当然你还需要根据返回的类型判断，没有图片的情况

 if (res.type == "application/json") {
    ... 
}