How can I set a default image if the image link value is null?

Question

I want a default image that I have in my image folder to display when the profile and banner image VALUE of a user is null. I thought it was working, but it's only for when the image (A user that has an image that isn't null) is loading for the split second that it takes to retrieve the image from the source. Does anyone know what I need to do? The image link is reconstructed so that it is actually a link that links to the image instead of just the image file name. So basiclally, I need to access both profile_img and profile_banner if either of them is null then display the default image I have tried to set, otherwise load the reconstructed link in profile_img_complete and profile_banner_complete. I hope that makes sense, I would appreciate any help. Here are the JSON values.

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 [content, setContent] = useState('');
    const [photoURL, setPhotoURL] = useState('../../images/user-solid.svg');
    const [bannerURL, setBannerURL] = useState('../../images/default-header.jpg');

    useEffect(() => {
        UserProfileService.getProfile().then(
            (response) => {
                if (response.data.profile_img_complete)
                    setPhotoURL(response.data.profile_img_complete);
                if (response.data.profile_banner_complete)
                    setBannerURL(response.data.profile_banner_complete);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
            }
        );
    }, []);

    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>
                <img src={photoURL} alt='Avatar' className='avatar'></img>
                <img src={bannerURL} alt='Banner' className='banner'></img>
                <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;

Answer 1

The default image should work on load but if it is set to null then you will lose that default.

Try adding it with the ternary operator

const [photoURL, setPhotoURL] = useState(null);
const [bannerURL, setBannerURL] = useState(null);

<img src={photoURL ? photoUrl : "../../images/user-solid.svg"} alt='Avatar' className='avatar'></img>
<img src={bannerURL ? bannerUrl : "../../images/default-header.jpg"} alt='Banner' className='banner'></img>

That way any time the image is falsy it will render the default