Tengo un:
<img src={ "http://127.0.0.1:5001/api/users/profile_photo/" + user.profile_photo } className="img-fluid rounded-circle" alt="rounded image"/> Cada vez que cargo en la página, la función getUser() se ejecuta y recupera al usuario.
const getUser = async () => { let user = await axiosWithAuth().get('/users/' + userId); setUser(user.data); }; user.profile_photo es la clave que obtengo de AWS s3. ex. 43256722324654
El problema: cuando se carga la página, el src de la imagen aún no está configurado de lo que parece porque, en el backend express, la foto_perfil aparece sin definir. Se define en la segunda vuelta.
Debido a esto, AWS arroja un error para noSuchKey
/Users/timbogdanov/Desktop/hlam/server/node_modules/AWS-SDK/lib/request.js:31 throw err; ^
NoSuchKey: la clave especificada no existe.
¿Hay alguna forma de evitar que la imagen envíe la solicitud de obtención hasta que se establezca el objeto de estado del usuario?
¡Gracias!
Agregue una condición para renderizar la imagen. Si user.profile_photo no está definido, no lo renderice.
{user.profile_photo && <img src={ "http://127.0.0.1:5001/api/users/profile_photo/" + user.profile_photo } className="img-fluid rounded-circle" alt="rounded image"/> }