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
Para su Proyecto React, el nivel raíz está en /stratex y nada más alto que eso. Una solución rápida es almacenar la imagen dentro del mismo directorio raíz que su proyecto de reacción.
/var/www/html/stratex/image/ Y accediendo con ./media/strongnightstand.png .
Otra opción es configurar sus medios para que se conviertan en un servidor independiente. Ejemplo: https://www.example.com/media/strongnightstand.png
Esto puede hacer que su proyecto sea más complicado, pero idealmente para proyectos grandes para separar el almacenamiento de medios.
La última opción (similar a la anterior) es utilizar servicios de terceros (por ejemplo, cloudinary.com, AWS S3...)