How to retrieve images from server path using reactjs

I have an api that looks like this :

        "id": 9,
        "fullnames": "JOHN DOE",
        "email": "",
        "status": "Active",
        "directreport": null,
        "date_created": "2021-11-01T09:29:33.000+0000",
        "date_updated": "2022-03-22T12:42:50.000+0000",
        "view": true,
        "lineManager": 43,
        "accessLevel": "Level1",
        "lastLogIndate": "06-Apr-2022 13:08:06",
        "userPicture": "../media/strongnightstand.png",

The userPicture is a a link to a directory in the server where all images are stored. I am trying to put the link as the image source but the image does not display. My build file is in /var/www/html/stratex and the document root of my server conf file is also /var/www/html/stratex
The images are in /var/www/html/media directory.
My code looks like this :

const [avatar, setAvatar] = useState("");

 useEffect(() => {
    if(myuser) {
 }, [myuser]);

<CardAvatar profile>
    { avatar == null || avatar == undefined || avatar === '' || avatar == "null" ? ( <img src={Avatar} alt="..." /> )
    : avatar ? ( <img src={avatar} alt="..." /> )
    : (<img src={Avatar} alt="..." /> )}


Storing the images in the db is not an option because they slow down the site.
Any advice/help on what i’m doing wrong will be appreciated. Thanks

For your React Project, the root level is at /stratex and nothing upper than that. A quick solution is to store the image inside same root directory as your react project.


And accessing it with ./media/strongnightstand.png .

Another option is to config your media to become a standalone server. Example:

This may make your project more complicated, but ideally for big project to separate media storage.

Last option (similar to above), is to use third party services (e.g., AWS S3…)