因此，当服务器发送JSON图像时，您需要使用Int8Array将JSON转换为Buffer
则需要将其转换为Blob，然后创建一个URL对象：
EDIT：在获取时使用useEffect，这就是产生循环错误原因
现在就试试：

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

export default function CardData(){
const [data, setData] = useState(
    []
);

useEffect(() => {
   const url = 
   `http://localhost:5000/getDrawings/${localStorage.getItem("user")}`;
     Axios.get(url).then((res)=>{
    setData(res.data);
   }).catch(err=>console.log(err));
   }, []);
   return data;
}

下面是我试图解决您的问题的示例

import React, { useEffect, useState } from "react";
import CardData from "./CardData";

function Card(){

const cards = CardData();
try{const allCards = cards.map( function (data) {
    //let username = data.username;
    console.log("here!!!");
    const name = data.name;

    const blob = new Blob([Int8Array.from(data.img.data.data)], {type: data.img.contentType });

    const image = window.URL.createObjectURL(blob);

    return( 
        <div className = "col-3">
            <div className = "adjust">
                <div className="image">
                    <img width="300" height="300" src={image}></img>
                </div>
                <div className="name">{name}</div>
            </div>
        </div>
    );
})
return [allCards];}
catch(e){ return null;}
}

export default Card;