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": "../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 y la raíz del documento del archivo conf de mi servidor también está en /var/www/html/stratex Las imágenes están en el directorio /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>

Almacenar las imágenes en la base de datos no es una opción porque ralentizan el sitio. Cualquier consejo/ayuda sobre lo que estoy haciendo mal será apreciado. Gracias