How to retrieve images from server path using reactjs-CodePudding

I have an api that looks like this :

{
        "id": 9,
        "fullnames": "JOHN DOE",
        "email": "[email protected]",
        "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) {
      setName(myuser.fullnames);
      setEmail(myuser.email);
      setTeamId(myuser.team);
      setId(myuser.id);
      setAvatar(myuser.userPicture);
    }
    
 }, [myuser]);

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

</CardAvatar>

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

CodePudding user response：

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.

/var/www/html/stratex/image/

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

Another option is to config your media to become a standalone server. Example: https://www.example.com/media/strongnightstand.png

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. cloudinary.com, AWS S3...)