后端直接传一张图片(不是地址)过来,怎么在前端显示??

William_Wang
  • 12

image.png
这是打印出来的结果
image.png
image.png
需求:打开表格对应行数据的二维码(图片)
image.png

回复
阅读 2.2k
9 个回答

那你就这么处理试试

function downloadImg() {
  axios({
    url: this.downloadImgSrc, //URL,根据实际情况来
    method: "get",
    responseType: "blob",
  }).then(function (response) {
    let blob = new Blob([response.data], { type: response.data.type });
    let url = URL.createObjectURL(blob);
    //url 你赋值给你需要展示的变量即可
  });
}

详情可以查看前端常用文件下载上传方法

把这个请求直接丢给 img 的 src 浏览器会自己识别的

咋不是地址,给的响应头是image就行了

这是图片的base64码,可以在img标签里以

<img src=“data:image/png;base64,***************************************************"/>

这样的形势展示,**,就是返回图片内容,当然如果后端帮你加上了前缀,就直接赋值src

直接把请求的url写到img的src上就好了,注意让后台在返回头上把content-type标记为image

意思就是这张图片你没办法靠<img>正常用对吧,因为你要根据某些参数(比如请求头里带标志)去下载这张图,那问题就简单了,百度一下axios下载文件

图片是JFIF格式,用axios的话,可以试试请求config加一个{responseType: 'blob'}然后:

<img src={URL.createObjectURL(responseData)} />

希望能帮助到你。

谁提供的接口去问谁,这是他的职责。
一般后端给的图片都是能直接下载或者显示的,如果不能就是他有问题。
最大的可能是他没有设置http响应头

daniel肥杰
  • 1
新手上路,请多包涵

很少后端这样操作的,后端一般返回base64就简单了,何必互相为难。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏