无法使用 API 渲染图像

图像"/>

无法使用 API 渲染图像

我正在使用多头像 api 在 UI 上呈现随机图像，但出现以下错误。我也试过使用 promises 来渲染 UI 但没有得到结果。

未捕获的类型错误：第一个参数必须是字符串类型之一， Buffer、ArrayBuffer、Array 或 Array-like Object。接收类型 未定义

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import { profilePicRoute } from "../utils/apiRoutes";
import { Buffer } from "buffer";

function ProfilePic() {
  const api = "";
  const navigate = useNavigate();
  const [profilePic, setProfilePic] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedPofilePic, setSelectedPofilePic] = useState(undefined);

  const toastStyles = {
    position: "top-center",
  };

  const setProfilePicture = async () => {};
  useEffect(() => {
    const data = [];
    for (let i = 0; i < 4; i++) {
      const image = axios.get(`${api}/${Math.round(Math.random() * 1000)}`);
      const buffer = Buffer(image.data);
      data.push(buffer.toString("base64"));
      console.log(data);
    }
    setProfilePic(data);
    setIsLoading(false);
  }, []);

  return (
    <div className="profilePage">
      <h1>Pick your favorite profile picture</h1>
      <div className="profilePics">
        {profilePic.map((pic, index) => {
          return (
            <div
              key={index}
              className={`pic ${selectedPofilePic === index ? "selected" : ""}`}
            >
              <img
                src={`data:image/svg+xml;base64,${pic}`}
                alt="profile pic"
                onClick={() => setSelectedPofilePic(index)}
              />
            </div>
          );
        })}
      </div>
      <ToastContainer />
    </div>
  );
}

export default ProfilePic;

Since you were using the async you must have to use await keyword , otherwise it will return promises,and you should use the function inside the useEffect 

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import { profilePicRoute } from "../utils/apiRoutes";
import { Buffer } from "buffer";

function ProfilePic() {
  const api = "https://api.multiavatar";
  const navigate = useNavigate();
  const [profilePic, setProfilePic] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedPofilePic, setSelectedPofilePic] = useState(undefined);

  const toastStyles = {
    position: "top-center"
  };

  useEffect(() => {
    const setProfilePicture = async () => {
      const data = [];
      for (let i = 0; i < 4; i++) {
        const image = await axios.get(
          `${api}/${Math.round(Math.random() * 1000)}`
        );
        console.log(image);
        const buffer = Buffer(image.data);
        data.push(buffer.toString("base64"));
      }
      setProfilePic(data);
      setIsLoading(false);
    };
    setProfilePicture();
  }, []);

  return (
    <div className="profilePage">
      <h1>Pick your favorite profile picture</h1>
      <div className="profilePics">
        {profilePic.map((pic, index) => {
          return (
            <div
              key={index}
              className={`pic ${selectedPofilePic === index ? "selected" : ""}`}
            >
              <img
                src={`data:image/svg+xml;base64,${pic}`}
                alt="profile pic"
                onClick={() => setSelectedPofilePic(index)}
              />
            </div>
          );
        })}
      </div>
      <ToastContainer />
    </div>
  );
}

export default ProfilePic;

Hope this code will help you.
Happy Coding :)