S3 Amplify React Native Storage.get(image) not display

Question

I try using hook on displaying my images from S3.

I keep received error 'source.uri should not be an empty string'

I dont know where am i missing here.

below is my code

const [img9, setImg9] = useState("");

const updateImgURL = async (img) => {
  console.log("into get s3");
  await Storage.get(img).then((data) => {
    setImg9(JSON.stringify(data));
  });
};

useEffect(() => {
  updateImgURL(m9_9_img);
}, []);

////////////////////////////////

        <Image
          style={{ height: 200, width: screenWidth / 3 + 20, borderWidth: 1 }}
          source={{
            uri: img9,
          }}
        />

fyi m9_9_img is a value that i get from previous screen object. I already do console log, it looks like the data has be set into the img9 but it still wont display. Can anyone help me on this?

Answer 1

If you see the correct image url in the console log the issue occurs in the initial render.

When your component renders the first time the value of "img9" is empty so setting the empty value to the uri is throwing this error.

You will have to do a conditional render like below

(img9 && <Image
          style={{ height: 200, width: screenWidth / 3 + 20, borderWidth: 1 }}
          source={{
            uri: img9,
          }}
        />)

By doing this, the image component will only be rendered when the value for img9 is set, you can also have something like a loading flag and show loading indicator.