H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue 后端直接返回图片流,前端怎么直接显示在页面上


我网上搜了一下,说window.URL.createObjectURL(res)可以但是没有效果

fetchData() {
const id = this.$route.query.companyId
getCusInfo(id).then(res => {
const _data = res.data
this.detail = _data
getFileDetail(_data.adAvatar).then(res => {
//   const blob = new Blob([res.data], { type: 'image/png' })
//   const url = window.URL.createObjectURL(blob)
//   this.brandLogoUrl = url
const src = window.URL.createObjectURL(res)
this.brandLogoUrl = src
console.log('res', res)
})
console.log('brandLogoUrl', this.brandLogoUrl)
})
},
<el-form-item label="广告头像" prop="adAvatar">
<el-upload
class="avatar-uploader"
action="#"
:http-request="advertiserUpload2"
:show-file-list="false"
>
<img v-if="https://segmentfault.com/q/1010000023908567/adAvatarUrl" :src="https://segmentfault.com/q/1010000023908567/adAvatarUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>

回答

后端设置一下response type就行了,为什么前端要这么麻烦地去处理

直接把 API 地址丢到 src 就可以了。

未经允许不得转载:H5W3 » vue 后端直接返回图片流,前端怎么直接显示在页面上

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址