如何使用 View 通过仅下载 URL 显示图像答案

【问题标题】：How to display image through download-only URL with View如何使用 View 通过仅下载 URL 显示图像
【发布时间】：2021-01-21 20:42:51
【问题描述】：

我的 React Native 0.63.2 应用程序将显示存储在云存储中的图像，代码类似于下面

<View style={styles.container}>
      <Image
        style={styles.stretch}
        source={{uri:'https://filefolder.download-only.com/image1.jpg'}}
      />
    </View>

问题是https://filefoler.download-only.com/image1.jpg 只允许在打开文件之前将文件下载到本地磁盘。我能想到的一种选择是将图像下载并保存在本地的临时文件中，并使用source={{uri:file:///path_to_image_file}} 显示它。但是，即使在用户单击并打开它之前，此选项也需要显式下载每个图像。是否可以使仅下载的图像表现得像可点击的图像 url？例如，在仅下载 url 之前添加 "data:image/jpeg;base64,"（类似于 source= {{uri:"data:image/png;base64,"+"https://filefolder.download-only.com/image1.jpg")

【问题讨论】：

RN 确实支持 base64，但尚不清楚您遇到的问题是什么。所以服务器不让你访问图像本身？是重定向吗？能否返回图片的base64编码？
我是用户站吗？你想显示一个占位符，然后在用户按下按钮后下载图像并显示它？或者您的网络资源不提供图片，只是让您下载它？您的描述不清楚。
@user938363 我不明白你有什么问题。请您解释一下您的问题的详细信息吗？
很可能，您的实际图片 url 必须与所谓的“仅下载”url 不同。只需下载示例图像并在首选浏览器的“下载”部分检查其完整图像路径（对于 Chrome 浏览器，它是 chrome://downloads/）并使用它而不是 filefolder.download-only.com/image1.jpg。
您的示例网址无效。

标签： image react-native

【解决方案1】：

为此使用rn-fetch-blob：https://github.com/joltup/rn-fetch-blob

以 blob 形式获取图像
将blob转换为base64以显示图像，使用以下代码将blob转换为base64

 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     var base64data = reader.result;                
     console.log(base64data);
 }

【讨论】：

【解决方案2】：

在使用从云存储复制的 URL 运行一些测试代码后，结果证明图像可以像往常一样通过 URL 显示为 <Image>。不需要像我们为流数据做的那样为图像路径添加前缀。

<View style={styles.container}>
  <Image
    style={styles.stretch}
    source={{uri:'https://filefolder.download-only.com/image1.jpg?expires=xxxxx&signature=xxxxxxxxxxxx'}}
  />
</View>

请注意，在浏览器中url（包含授权签名）仅允许将图像下载到本地文件系统。 <Image> 标签将首先下载图像并将其显示在渲染视图中。

【讨论】：