S3 Amplify React Native Storage.get(image) 不显示

Question

我尝试使用钩子显示来自 S3 的图像。

我一直收到错误消息'source.uri should not be an empty string'

我不知道我错过了什么。

下面是我的代码


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 是我从上一个屏幕对象获得的值。我已经做了控制台日志，看起来数据已经设置到 img9 中，但它仍然不会显示。谁能帮我解决这个问题？

Answer 1

如果您在控制台日志中看到正确的图像 url，则问题出现在初始渲染中。

当您的组件第一次呈现时，“img9”的值为空，因此将空值设置为 uri 会引发此错误。

您将必须像下面那样进行条件渲染

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

通过这样做，只有在设置了 img9 的值时才会渲染图像组件，您还可以拥有类似加载标志和显示加载指示器的内容。

Answer 2

解决方案 1 - 在状态中添加临时占位符图像

const [img9, setImg9] = useState(require('../assets/images/placeholder.png'));

解决方案 2 - 当从 s3 成功获取图像时渲染图像视图。

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

S3 Amplify React Native Storage.get(image) 不显示

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

amazon-s3

react-native

aws-amplify