从谷歌云下载图片并显示在 React 网站上答案

【问题标题】：Download image from Google cloud and display on React website从谷歌云下载图片并显示在 React 网站上
【发布时间】：2020-08-18 03:43:29
【问题描述】：

我现在正在尝试学习 React 和 Firebase。我愿意

从我的 Google 云存储中下载图片
在我的网页上显示该图像

我在这里按照本指南下载文件：https://firebase.google.com/docs/storage/web/download-files

但它似乎已经过时了。我按照这个其他堆栈溢出线程的建议来更改包导入。 google-cloud TypeError: gcs.bucket is not a function.

所以现在我可以下载该文件，但是我不知道如何访问它。据我了解，它将在内存中，但我将如何显示它？下载文件的文档在这里https://googleapis.dev/nodejs/storage/latest/File.html#download。

这是我目前拥有的

const { Storage } = require('@google-cloud/storage');

function MyPage(props: any) {

    const storage = new Storage({
        projectId: 'myProjectId',
    });

    const myImage = await storage
        .bucket('myBucket')
        .file('myImage.jpg')
        .download();
    });

    return (
        <div id="MyPageContainer">
            <h1>Hello!</h1>
        </div>
    );
}

【问题讨论】：

您正在遵循 Cloud Storage 的 Firebase Web 客户端库指南，但您使用的是 nodejs 服务器库。它们非常不同。
这是正确的库吗？ firebase.google.com/docs/web/setup#node.js-apps
不，您在这里根本没有使用 Firebase。您正在使用谷歌云库进行云存储。通知@google-cloud/storage
啊，我明白你在说什么。但是，我找不到我需要导入的内容。我遵循的指南没有提到要使用哪些导入。
为什么要从云存储下载到您的网络服务器？您应该在 HTML 中提供一个链接，以便最终用户直接从 Cloud Storage 下载。有性能和成本因素需要考虑。如果您直接从您的 Web 服务器传送安全文件，请查看签名 URL。此示例说明如何使用 Node.js cloud.google.com/storage/docs/… 从 Cloud Storage 下载文件下载文件后，您需要创建一个 HTML 标记 + 位置，以便浏览器从您的服务器下载。

标签： reactjs typescript firebase google-cloud-platform google-cloud-storage

【解决方案1】：

正如@JohnHanley 在 cmets 中提到的那样，您应该在 HTML 中提供一个链接，以便用户可以直接从 Cloud Storage 下载文件，而不是将文件从 Cloud Storage 下载到您的 Web 服务器。

这将使您无需再通过应用程序的后端处理文件到 Cloud Storage 本身，这样效率更高，但您需要考虑实施它的性能和成本因素。如果您希望直接从您的 Web 服务器交付安全文件，您可以将其替换为签名 URL，您可以在 here 中查看它的文档。

如果您仍然选择通过我们的服务器进行处理，您可以查看此example，下载文件后，您需要创建一个 HTML 标记 + 位置，以便浏览器从你的服务器。

【讨论】：