reactjs - 如何在reactjs中显示图像？

Question

我已经从 '@material-ui/core' 导入了 import { Avatar }；使用头像显示图像

const TheHeader = () => {
  let _UsersId = localStorage.getItem("UsersId")
  const classes = useStyles();
  const [reRender, setRerender] = useState(false);
  const [profilepic, setprofilepic] = useState();
  const getProfile = async () => {
    const response = await Profile(_UsersId);
    setprofilepic(response.data)
  }
  useEffect(() => {
    getProfile();
  }, [reRender, profilepic]);
 .....


  <Avatar alt="" src={profilepic} className={classes.avatar}/>

结果是这样的（当前）

期望的结果

来自 api 的结果 console.log(response)

标签： reactjsmaterial-ui

Answer 1

更新getProfile函数以从二进制数据创建objectUrl ：

  const getProfile = async () => {
    const response = await Profile(_UsersId);
    const buffer = new Uint8Array(response.data)
    const blob = new Blob([buffer])
    setprofilepic(URL.createObjectURL(blob))
  }