反应如何显示字节数组图像

Question

我正在学习反应，我将Spring boot用作后端休息。所以我无法在我的React应用程序上从后端显示字节数组吗？

我的后端代码

@GetMapping(value = "/show-profil-user/{filename}",  produces = MediaType.IMAGE_JPEG_VALUE)
@ResponseBody
public byte[] showImages(@PathVariable("filename") String filename) throws IOException {
   return this.userService.getPictureByte(filename);
}

还有我的前线

interface Props {
  user: TUser;
}

const UserCard: FC<InjectedIntlProps & Props> = (props) => {
  const { intl, user } = props; 
  const [currentFile, setCurrentFile] = useState<any>();

  useEffect(() => {
    const getProfileUser = async () => {
      if (user) {
        const result = await userService.showPhoto(
          user.profile ? user.profile : "avatar.png"
        );
        setCurrentFile(result);    
      }
    };
    getProfileUser();
  }, [user]);
  

  return (
    <>
      <Card className={classes.root}>
        <CardActionArea>
          <img src={currentFile} alt="Logo" />;
          <CardMedia
            component="img"
            alt="Contemplative Reptile"
            height="200"
            image={currentFile}
            title="Contemplative Reptile"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {user.name}
            </Typography>
            <Typography gutterBottom component="p">
             {user.email}
            </Typography>
            <Typography gutterBottom component="p">
              {user.department}
            </Typography>
          </CardContent>
        </CardActionArea>
        <CardActions>
          <Button size="small" color="primary">
            Change photo
          </Button>
        </CardActions>
      </Card>
      
    </>
  );
};

export default injectIntl(UserCard);

在网络响应预览中，我得到了真实的图片，但没有显示在浏览器中