【vue显示从后端传过来的图片流】

<img :src="codeImg" alt="" />

data()等部分省略，直接看方法

handleImg: function (index) {
  if (this.dataManage[index].url == null) {
    this.checkShowImg = true
  } else {
    this.showImg = true
    showImg({
      path: this.dataManage[index].url,
      w: 1920,
      h: 512,
      quality: 1
    }).then(res => {
      const url = window.URL.createObjectURL(res.data)
      this.codeImg = url
    })
  }
},

方法很简单，首先判断该行数据中的【url】是否有值，有值则调用后端的在线显示图片方法，参数为图片路径，宽高以及质量。从后台传递过来的图片流在不加任何处理的情况下如下图所示

处理方法：

首先在axios交互方法中加入【responseType】

export const showImg = param => {
  return axios.request({
    url: '/api/v1/note/commodity/showImg',
    method: 'get',
    params: param,
    responseType: 'blob'
  })
}

其次将后台传递的值进一步处理【window.URL.createObjectURL】

const url = window.URL.createObjectURL(res.data)
this.codeImg = url

问题解决，图片在线显示完成。