如何从 Firebase 存储访问图像？

Posted 2023-02-22

【中文标题】如何从 Firebase 存储访问图像？

【英文标题】：How to access an image from firebase storage?

【发布时间】：2020-09-07 05:45:55

【问题描述】：

我想访问已上传到 Firebase 存储的图像。我已经尝试过他们在https://firebase.google.com/docs/storage/web/download-files 中告诉我的内容，但它不起作用。

我想做的很简单。我有一个带有来源的“img”标签。 使用 Vue.js，我想将上传的文件路径分配给图像源。

这就是我现在拥有的：

loadImage(details) 
  console.log(details.email);
  var storage = firebaseApp.storage();
  var gsReference = storage.refFromURL('gs://icachatdam.appspot.com/profilePics/[e-mail]/profPic.png')
  this.picture = gsReference.fullPath;

其中变量“picture”是图片来源：

<q-img :src="this.picture" spinner-color="white" style="height: 140px; max-width: 150px" />

【问题讨论】：

您不能使用 gs:// URL 将图像加载到浏览器中。您必须按照文档中的说明获取下载 URL。 firebase.google.com/docs/storage/web/…

【参考方案1】：

感谢 Doug 的回复，我已经进行了更多测试，这终于对我有用：

loadImage(details) 
  var starsRef = firebaseApp.storage().ref().child('profilePics/'+details.email+'/profPic.png');

  starsRef
    .getDownloadURL()
    .then(url => 
      this.pictureURL = url;
      //console.log(this.pictureURL);
    );

【参考方案2】：

问题可能在这里：

<q-img :src="this.picture" spinner-color="white" style="height: 140px; max-width: 150px" />

代替这个，写

<q-img :src="picture" spinner-color="white" style="height: 140px; max-width: 150px" />

让我知道这是否适合您。如果没有，我会再考虑一下。