0

I am trying to display an image on a profile of a user. I have been able to fetch the blob from the API and convert it to a URL blob but when I am trying to return it from the function and into the SRC of the tag, nothing is being displayed.

Previously I was simply displaying the image with <src = ""> and the src that I have put in the function, but when I implemented authentication, this no longer worked because there was a 401 unauthenticated error since no bearer token was sent with the request.

Output:

enter image description here

//profile.js

export const Profile = () => {

const [userProfileInformation, setUserProfileInformation] = useState([]);
const [isLoading, setLoading] = useState(true);

const { userId } = useParams();

useEffect(() => {
    getUserProfileInformation().then(() => {
        setLoading(false);
    });
}, []);

const getUserProfileInformation = async () => {
    const response = await UserService.getUserProfileInformation(userId)
        .then(response => response.json())
        .then(data => {
            setUserProfileInformation(data);
        });
}

const getProfileImage = async () => {
    const src = config.URL + "/users/" + userProfileInformation.userId + "/image/download";
    const options = {
        headers: {
            "Authorization" : `Bearer 

${AuthService.getCurrentlyAuthenticatedUser().accessToken}`,
            }
        };
        fetch(src, options)
            .then(res => res.blob())
            .then(blob => {
                console.log(blob);
                let url = URL.createObjectURL(blob);
                console.log(url);
                return url;
            });
    }

    if (isLoading) {
        return (
            <div id="loading">
                <h2>Loading...</h2>
            </div>
        )
    }

    return (
    <div>
        <AppNavbar />
        <div className="profileCard">
            <img id="profileImg" src={getProfileImage()}/>
            <h1>{getFullName(userProfileInformation.firstName, userProfileInformation.lastName)}</h1>
            <h2 id="email" role="email">{userProfileInformation.email}</h2>
            <h2>{userProfileInformation.location}</h2>
)
}

Any help would be appreciated, thanks.

devo9191
  • 219
  • 3
  • 13
  • fetch is async, and so is `getProfileImage`, meaning both function calls return a Promise. You cannot directly return the result of an async call. Your code fails because you're setting the returned Promise as the src. You need to add `const [src, setSrc] = useState(null);` and call setSrc(url); inside `then(blob => { ... })` instead of returning the URL (which does nothing since it doesn't return from the outer function, just the .then() callback function) –  Aug 17 '22 at 11:21
  • See also here: https://meta.stackoverflow.com/questions/254895/general-javascript-asynchronicity-reference-for-close-voting –  Aug 17 '22 at 11:22
  • Duplicate: [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) –  Aug 17 '22 at 11:23

0 Answers0