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

【问题标题】：S3 Amplify React Native Storage.get(image) not displayS3 Amplify React Native Storage.get(image) 不显示
【发布时间】：2021-02-16 05:09:47
【问题描述】：

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

我一直收到错误“source.uri 不应为空字符串”

我不知道我在这里错过了什么。

下面是我的代码


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 但它仍然不会显示。谁能帮我解决这个问题？

【问题讨论】：

标签： react-native amazon-s3 aws-amplify

【解决方案1】：

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

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

你必须像下面这样进行条件渲染

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

通过这样做，图像组件将仅在设置 img9 的值时呈现，您还可以拥有加载标志和显示加载指示器之类的东西。

【讨论】：

tq 为您的解决方案...但现在没有错误，图像没有显示
状态更新是否使用了有效的图片 url
是的，我已经尝试硬编码高度 n 宽度..仍然是空框...但是如果我在 uri:'s3_url' 中手动粘贴 S3 url（我从控制台日志中获取），则图像将出现..
你把 console.log 放在哪里了？您可以将状态值放在文本中 n 看到值吗？ {img9}
是的 tq...我忘记了....我删除了 json.stringify...现在它的工作就像魅力...tq 非常

【解决方案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

【讨论】：

tq 获取您的代码...现在没有错误但图像没有显示.. {img9 != "" ? ( {img9 }> ) : ( No Image Store{img9} )}