Question

当用户注册时，他们可以登录他们的帐户，应用程序会立即将他们导航到自定义个人资料页面，以便他们完成注册。我想做的一件事是拥有一张通用的个人资料照片（如剪影或类似的东西）。这是我想要显示它的页面的基本html代码。变量从firebase中的“profile”表中提取，我在profile-page.ts中为它们分配值。现在，图像刚刚来自解决方案中的文件夹...

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title center>{{groupName}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="has-header" padding>
  <div class="list card">
    <ion-item>
        <ion-avatar>
            <img src="../../../assets/imgs/stockGroup.jpg">
        </ion-avatar>
    </ion-item>
    <div class="item">
      <h2>{{groupHandle}}</h2>
      <p>{{groupArea}}</p>
    </div>
    <div class="item item-body">
      <p>Image goes here</p>
    </div>
  </div>
  <button ion-button full color="dark" (click)="onGoToHomepage()"> Home </button>
  <hr>
  <button ion-button full color="dark"> View Group </button>
</ion-content>

设置这样的东西的正确方法是什么？我想我可以创建一个像{{profilePhoto}}这样的变量，并通过getUserProfilePhoto（）函数给它一个值。

在解决方案中有一张照片是否可以，然后在创建帐户后将其加载到firebase中，因为用户个人资料照片？（当然，如果他们决定更新它，可以更新和覆盖）
在firebase中的哪些地方存储了照片，以及它们与该唯一的uid有何关联？
总体而言，这样的最佳工作流程是什么？我理解在firebase表中如何读取和写入简单的文本值，但图像明显不同。

谢谢！

Answer 1

根据我的理解，您正在寻找存储已登录用户的图像然后显示它。如果可能的话，我可以帮助你。

记录用户

一个。使用firebase身份验证的 Google ， facebook 和 twitter 会在登录后立即为您提供用户个人资料照片。因此，您可以将配置文件图像存储在用户树下，如下图所示。

正如你可以看到的那样，我的用户树就是userId，用户是photoUrl。

湾电子邮件/密码 firebase身份验证方法无法为您提供任何用户照片，因此您可以使用默认设置。

您可以使用firebase存储来上传用户照片和下载图像。请参阅以下代码，了解如何将用户图像上传到fb存储。

Plugins: [
   new CopyWebpackPlugin([
      { from: 'node_modules/bootstrap/dist/css', to: 'css/'},
      { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
   ])
]

See this post on how to upload image to storage after user selects a photo and press upload function.

var file=e.target.files[0]; // get the image
var storageRef=firebase.storage().ref('firebase').child(file.name);
var task=storageRef.put(file);

task.on('state_changed',function progress(snapshot){
   var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100; // using the percentage you can show a progess bar in the client if you wish.
   if (percentage==100){
     storageRef.getDownloadURL().then(function(url) { // here you'll get the image's url as soon it's uploaded to the fb storage.
            updateUserPhoto(url, file.name) // call a function to update the user photo.                
     });
   }

注意：您使用离子方法可以使用angularfireStorage refer this link

希望这能让您了解如何在数据库中存储已记录用户的图像，以及如何将图像上传到存储并使用它。

度过美好的一天

新创建的用户的股票用户个人资料照片

1 个答案: