将图像从 Firebase 存储链接到 Firestore 文档并在 React Native 中显示它们

Posted 2023-03-22

【中文标题】将图像从 Firebase 存储链接到 Firestore 文档并在 React Native 中显示它们

【英文标题】：Linking images from Firebase Storage to Firestore document and displaying them in React Native

【发布时间】：2021-03-02 01:38:09

【问题描述】：

背景

我正在尝试手动将图像上传到 firebase 存储（使用网页中的上传文件按钮），但是我不知道以后如何将它们链接到 firestore 文档。我想出的（我不确定它是否有效）是复制存储桶中图像的 url 并将其添加到名为 profilePicture 的文档中的字符串类型字段中。我无法让它工作的原因是我对 React Native 真的很陌生，除了输入特定的本地路线之外，我不知道如何正确地要求图像。还请注意，我需要用户数据（例如个人资料名称）的方式是在使用电子邮件/密码身份验证登录后，我将数据作为参数传递以响应导航并将其作为额外数据。

我的尝试

一旦我复制了图像 url 并将其粘贴到 firestore 文档中，我将这样做：

const profilePicture = props.extraData.profilePicture;

<Image source=require(profilePicture)/>

我也尝试过使用反引号，但这也不起作用。我收到的错误消息是：

TransformError src\screens\Profile\ProfileScreen.js: src\screens\Profile\ProfileScreen.js:Invalid call at line 27: require(
  profilePicture: profilePicture
)

注意：这是一个世博会管理的项目。

问题

问题出在代码中还是在我链接两个图像的方式上？也许两者兼而有之？我应该要求提供文件而不是依赖之前传递的数据吗？

提前非常感谢！

编辑 1：

我正在尝试从当前登录的用户那里获取所有信息，经过一些研究后，我了解到以这种方式需要图像：

const ref = firebase.storage().ref('path/to/image.jpg'); const url = 等待 ref.getDownloadURL();

然后我需要<Image source=uri: url/>中的图像

我知道这对于静态的东西可能很有用，但我不知道如何为每个不同的用户更新 ref。

编辑 2：

尝试使用编辑 1 中提到的方法，只是想看看会发生什么，但是它似乎不起作用，图像只是没有显示。 可能是因为我的组件是函数组件而不是类组件（？

【参考方案1】：

我了解您的目标是为上传到 Cloud Storage 的每张图片生成一个包含下载 URL 的 Firestore 文档。

如果这是正确的，一种方法是使用Cloud Function，每次将新文件添加到 Cloud Storage 时都会触发该Cloud Function。以下 Cloud Function 代码正是这样做的。您可以根据您的具体要求对其进行调整。

exports.generateFileURL = functions.storage.object().onFinalize(async object => 

    try 
        const bucket = admin.storage().bucket(object.bucket);
        const file = bucket.file(object.name);

        // You can check that the file is an image

        const signedURLconfig =  action: 'read', expires: '08-12-2025' ;  // Adapt as follows

        const signedURLArray = await file.getSignedUrl(signedURLconfig);
        const url = signedURLArray[0];

        await admin.firestore().collection('profilePictures').add( fileName: object.name, signedURL: url ) // Adapt the fields list as desired 
        return null;

     catch (error) 
        console.log(error);
        return null;
    

);

---

有关 Admin SDK here 的 getSignedUrl() 方法的更多信息。

还请注意，您可以自己分配 Firestore 文档 ID，而不是让 Firestore 生成它，如上面的代码所示（使用 add() 方法）。例如，您可以将用户的 uid 添加到图像元数据中，并在 Cloud Function 中获取此值并将此值用作文档 ID。

另一种可能性是使用用户的 uid 命名个人资料图像。

【讨论】：

让我看看我是否理解，此代码在项目后台运行，适用于上传到 Firebase 存储的每个文件？是否可以修改此代码以填充现有 Cloud Firestore 文档中的空白字段而不是创建新字段？

另外，我知道这是一个愚蠢的问题，但我真的很陌生，我将如何在我的屏幕上显示图像？

“此代码在项目后台运行，适用于上传到 Firebase 存储的每个文件”-> 是的，完全正确！ “Cloud Functions for Firebase 是一个无服务器框架，可让您自动运行后端代码以响应由 Firebase 功能触发的事件”，例如 Cloud Storage for Firebase。

“此代码是否可以修改为填充现有 Cloud Firestore 文档中的空白字段，而不是创建一个新字段” => 当然！您可以执行 await admin.firestore().collection('profilePictures').doc(userId). update( fieldName: url ) 之类的操作，以使用与 userId 对应的 ID 更新文档的字段 fieldName。

"如何在我的屏幕上显示图像？" => 签名 URL（即const url = signedURLArray[0];）是一个可在您的前端用作任何图像 URL 的 URL，在 img html 标记中。因此，请阅读包含此值的 Firestore 文档并更新您的 img 标记的 src 属性，如下所述：google.com/…