React 后端接口返回数据类型为image怎么接

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

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

接口要求信息：

• 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等