I'm trying to load a base64 image from my backend api, however I've reloaded my code a few times without changing anything, and sometimes it works just fine but most of the time it doesn't

enter code here

my code :

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>
    );

backend (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)
        ]);
    }

sometimes it shows the proper image that i want to display : properly working

sometimes it only loads halfway : halfway there

sometimes it doesn't work at all and doesn't even show the default picture : not working

sometimes it shows the default picture and the console shows an error message that says JSON Parse error: Expected '}' (this happens most of the time)

any help would be much appreciated c-: !