img标签加载图片时如何携带token

出于安全考虑，使用img标签展示图片时，需要在请求头添加token。尝试发现这种请求不经过axios的拦截请求，且不能以参数的方式携带token（不安全）

解决方法： 自定义一个组件(TokenImg)

import Axios from "axios"
import { useEffect, useState } from "react"

function TokenImg({ url, className }) {
    const [tempUrl, setTempUrl] = useState("")

    useEffect(() => {
        Axios.get(url, {
            headers: {
                Authorization: localStorage.getItem('token')
            },
            responseType: "blob" //将响应直接存储为 Blob 对象
        }).then(res => {
            const data = URL.createObjectURL(res.data)
            setTempUrl(data)
        })
    }, [])

    return (
        <img src={tempUrl} className={className} />
    )
}
export default TokenImg

使用：

import TokenImg from '@/components/tokenImg'
{/* 旧： */}
{/* <img src={url} className={styles.pic} ></img> */}

{/* 新的 */}
<TokenImg src={url} className={styles.pic}></TokenImg>