Fetching Image from Server with a React Native App

Question

I'm building a mobile app with a Springboot Rest API backend and a React-Native Frontend. I'm able to upload a picture from the react-native API to Springboot API and to store it in my postgres database as byte[]. I'm able to retrieve this picture with a simple Get Request tested by Postman. BUT I'm not able to fetch this image and to display it in my React Native app.

I understood there is a problem to use blob file immediately with react native but I didnt see how to handle it.

Here is my fetch function :

export const getAquariumPicture = async (
  aquariumId: string
): Promise<ImageSourcePropType | any> => {
  const suffixUrl = "api/downloadAquariumPicture/";
  const urlService = urlServer + suffixUrl + aquariumId;
  try {
    const token = await getData("token");
    const response = await fetch(urlService, {
      method: "GET",
      headers: {
        Authorization: token
      }
    });
    return response;
  } catch (error) {
    console.error(error);
  }
};

how can I use this response to pass it as source in an Image balise ?

Here how I'm trying to use the photo :

  if (rootStore.tankStore.tankImageState === "pending") {
    rootStore.tankStore.storeGetImageTank();
  }
  const photo = rootStore.tankStore.tankPicture;
  console.log("photo = " + photo);

  return (
    <TouchableOpacity onPress={() => choosePicture()}>
      <Image source={cameraIcon} style={styles.icon} />

      {photo != null ? (
        <Image source={photo} style={styles.photo} />
      ) : (
        <ActivityIndicator />
      )}
    </TouchableOpacity>
  );

Please add the code for your Image component and how you are adding it to the source of Image. — user11587840
– user11587840, Commented Mar 30, 2020 at 5:18

Julien · Accepted Answer · 2020-03-30 19:55:47Z

2

In fact I found a solution :

      <Image
        source={getAquariumImageSource(RootStore.tankStore.tankList[0].id)}
        style={styles.photo}
      />
      
      
      
      export const getAquariumImageSource = (id: string): ImageSourcePropType => {
  return {
    uri: `${urlServer}api/downloadAquariumPicture/${id}`,
    method: "GET",
    headers: {
      Pragma: "no-cache",
      Authorization: RootStore.memberStore.token
    },
    cache: "reload"
  };
};

answered Mar 30, 2020 at 19:55

Julien

211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetching Image from Server with a React Native App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related