Tengo una api que se ve así:

 { "id": 9, "fullnames": "JOHN DOE", "email": "johndoe@gmail.com", "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": "/var/www/html/media/strongnightstand.png", }

La imagen de usuario es un enlace a un directorio en el servidor donde se almacenan todas las imágenes. Estoy tratando de poner el enlace como fuente de la imagen, pero la imagen no se muestra. Mi archivo de compilación está en /var/www/html/stratex mientras que las imágenes están en /var/www/html/media . Mi código se ve así:

 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>

Cualquier consejo/ayuda sobre lo que estoy haciendo mal será apreciado. Gracias