React 后端接口返回数据类型为image怎么接_react get请求返回图片怎么直接展示-优快云博客

本文档介绍了一个在React组件中通过fetch获取设备封面图片接口的流程，包括请求参数设置、处理返回的blob数据以及将图片显示在img标签中的方法。在解决问题的过程中，作者遇到了对fetch和blob理解不足的问题，最终通过学习和实践成功显示了图片。总结了需要深入理解http请求、fetch和blob等相关知识的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题（解决方法在下面）：

开发联调过程中，一个请求设备封面的接口，返回的数据格式是个图片

接口要求信息：

get请求，带两个id的参数
带token
我要把这照片放到页面中img标签中显示

在这里插入图片描述

解决方法：

写个组件

import React, { useEffect, useState } from 'react'
import { cache } from '@cloud-app-dev/utils'
import noData from '@src/assets/imgs/nocz.png'
//这里主要意义就是取token， cache这个是封装的一个函数
const getHeader = () => ({ Authorization: cache.getCache('token', 'session') });

function ScreenShot({ deviceId, channelId }) {
    const [state, setState] = useState({ url: "" })
    useEffect(() => {
        console.log(channelId,'channelId')
        if (!channelId && !deviceId ) {
            return
        }
        //在这里来拼接口的url                                                                                                           带上token
        fetch(`/api/v1/dig/devices/screenshot?device_id=${deviceId}&channel_id=${channelId}`, { headers: getHeader() }).then(async res => {
            if(res.status===400){
                return
            }
            //返回的是流，用fetch的内置函数blob()转一下
            const blob = await res.blob()
            //再转为URL
            const url = URL.createObjectURL(blob)
            //存！
            setState(old => ({ ...old, url }))
        })
    }, [deviceId, channelId])
                             //这里直接这样用就可以了，就能够再页面中显示了
    return state.url?<img src={state.url}></img>:<img style={{ width: '100%', height: '100%' }} src={noData} alt="" />
}


export default ScreenShot


使用：
<ScreenShot channelId={item.channel_id} deviceId={device_id}/>

总结：
1.对fetch，blob不了解
2.解决问题方向错误，由于请求用的都是‘fetch-like-axios’，也不知道fetch就有内置的blob函数，通过new Blob()绕了一圈转成功了，但是拼到img标签上图片没显示，就一直纠结可能转错了
3.下去多了解一下http请求，以及请求方式，fetch，blob等