Estoy tratando de cargar una imagen base64 desde mi API de back-end, sin embargo, he recargado mi código varias veces sin cambiar nada, y a veces funciona bien, pero la mayoría de las veces no.

Ingresa el código aquí

mi código :

 const [image, setImage] = useState(''); useEffect(() => { fetch('http://example:8000/api/auth/return_picture/image',{ method: 'GET'}) .then((response) => response.json()) .then((responseJson) => { setImage(responseJson.uri); }) .catch((error) => { console.log(error); }); }, []); return( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <Image source={{uri: image ? `data:image/jpg;base64,${image}` : "https://i.pinimg.com/236x/09/f0/84/09f084cd8a8093ea5738a3ab75c210df.jpg"}} style={styles.avatar}/> </View> );

back-end (php):

 /** * @Route("/return_picture/{image}", name="return_picture", methods={"GET"}) */ public function return_picture(ManagerRegistry $doctrine, Request $request, $image): Response { $file = "uploads/profile_pictures/" . $image . ".jpg"; $test = file_get_contents($file); return $this->json([ "uri" => base64_encode($test) ]); }

a veces muestra la imagen adecuada que quiero mostrar: funcionando correctamente

a veces solo carga a mitad de camino: a mitad de camino

a veces no funciona en absoluto y ni siquiera muestra la imagen predeterminada: no funciona

a veces muestra la imagen predeterminada y la consola muestra un mensaje de error que dice JSON Parse error: Expected '}' (esto sucede la mayor parte del tiempo)

cualquier ayuda sería muy apreciada c-: !