How to retrieve images from server path using reactjs

Question

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

You cannot display images outside the server root unless you create server-side code that allows this. If you're using just apache you'll have to move the images inside the stratex dir. Imagine if a browser could access the entire server's hard drive... — user5734311
– user5734311, Commented Apr 22, 2022 at 7:16

Jacky · Accepted Answer · 2022-04-22 07:24:05Z

1

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...)

answered Apr 22, 2022 at 7:24

Jacky

3,2894 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to retrieve images from server path using reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related