I am using a spring boot backend with a react.js frontend for a web application. Once a user is logged in, it directs the user to their Profile
where they will have their username, profile picture, and a banner displayed on the screen. I have developed a backend service that returns the necessary information in the body of my GET request on Postman such as the link of the image (Profile or Banner). How can I use React to obtain the necessary link in profile_img_complete
and insert it into my image that has a default image in it already if the value is null? My demo user has an image in the database ready to be used, so it should not be displaying the default image, but it is. Any help would be deeply appreciated, here is an image of the information on Postman.
Profile.jsx:
import React, {useState, useEffect} from 'react';
import {Link} from 'react-router-dom';
import {useSelector} from 'react-redux';
import UserProfileService from '../../services/user-profile.service';
import './styles/Profile.css';
const Profile = () => {
const {user: currentUser} = useSelector((state) => state.auth);
const {id: currentId} = useSelector((state) => state.auth);
const [content, setContent] = useState('');
const [photoURL, setPhotoURL] = useState('../../images/user-solid.svg');
//user-solid is the default image I want if the profile image link is null
useEffect(() => {
UserProfileService.getProfile().then(
(response) => {
setContent(response.data);
},
(error) => {
const _content =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
setContent(_content);
}
);
if (currentId && currentId.profile_img_complete) {
setPhotoURL(currentId.profile_img_complete);
}
}, [currentId]);
if (!currentUser) {
return <Link to='/login' />;
}
return (
<div className='page'>
<div className='profile-container'>
<header className='jumbotron'>
<h3>
<strong id='profile-name'>{currentUser.username}</strong> Profile
</h3>
</header>
<p>
<img src={photoURL} alt='Avatar' className='avatar'></img>
<strong>Token:</strong> {currentUser.accessToken.substring(0, 20)} ...{' '}
{currentUser.accessToken.substr(currentUser.accessToken.length - 20)}
</p>
<p>
<strong>Id:</strong> {currentUser.id}
</p>
<p>
<strong>Email:</strong> {currentUser.email}
</p>
<strong>Authorities:</strong>
<ul>
{currentUser.roles &&
currentUser.roles.map((role, index) => <li key={index}>{role}</li>)}
</ul>
<button>
<Link to={'/profile/edit'}>Edit Profile</Link>
</button>
</div>
</div>
);
};
export default Profile;