I have a:
<img src={ "http://127.0.0.1:5001/api/users/profile_photo/" + user.profile_photo }
className="img-fluid rounded-circle"
alt="rounded image"/>
Whenever I load in the page, the function getUser() runs and retrieves the user.
const getUser = async () => {
let user = await axiosWithAuth().get('/users/' + userId);
setUser(user.data);
};
user.profile_photo is the key that I get back from AWS s3. ex. 43256722324654
The Problem: When the page loads, the image src is not yet set from what it looks like because, in the express backend, the profile_photo comes through undefined. It becomes defined on the second go around.
Because of this AWS throws an error for noSuchKey
/Users/timbogdanov/Desktop/hlam/server/node_modules/AWS-SDK/lib/request.js:31 throw err; ^
NoSuchKey: The specified key does not exist.
Is there any way to stop the image from sending the get request until the user state object is set?
Thank you!
Add a condition to render the image. If user.profile_photo is not defined don't render it.
{user.profile_photo && <img src={ "http://127.0.0.1:5001/api/users/profile_photo/" + user.profile_photo }
className="img-fluid rounded-circle"
alt="rounded image"/>
}