javascript - Firebase getDownloadURL 从存储无法设置 Img Src

Question

我正在尝试复制这个问题的结果 here 。我可以在有效的数据库子级上调用 getDownloadURL()，但它返回的结果似乎无法设置为 IMG 的 src。这是我当前用来尝试获取下载 URL 的代码:

var storage = firebase.storage();
var storageRef = storage.ref();
var imgRef = storageRef.child('profile-pictures/1.jpg');
var pulledProfileImage = imgRef.getDownloadURL();

然后，我通过执行以下操作将 pulledProfileImage 推送到数组中:

dataArray.push(pulledProfileImage)

将数组(以及其他信息)发送到用数据填充表的函数。使用此处的代码引用图像本身:

cell1.innerHTML = '<img id="profileImage" src="'+dataArray[0]+'">';

当我在代码执行后检查源代码时，src被设置为[Object, Object]。我还有记录结果的脚本，当它这样做时，看起来像这样:

0:C
Hc:false
N:2
Pa:null
Wb:false
ja:null
na:"https://firebasestorage.googleapis.com/v0/b/app-name-da7a1.appspot.com/..."
s:null

奇怪的是，如果我通过调用 console.log(Array[0].Wb) 让控制台从上面的列表中打印出不同的属性，例如 Wb >它完美地打印出false......每个 bool 值似乎都很好，只是不是字符串或数字。

仅供引用，我的存储结构如下所示:

----root
  |
  |------profile-pictures
             |---------------------- img1.png <--the console is trying to print this one
             |
             |---------------------- img2.png 

我的数据库结构用于查找要拉取的图像名称，如下所示:

----root
  |
  |----folder1
          |
          |
          |----subfolder1
                   |
                   |
                   |----subfolder2
                           |
                           |
                           |--------img1.png
                           |
                           |--------img2.png

基本上，我的代码导航到子文件夹二，提取子值，然后进入存储并尝试从那里提取它们。

Answer 1

这里的技巧是 getDownloadURL 是一个异步函数，它恰好返回一个 promise (根据 the docs ):

var storage = firebase.storage();
var storageRef = storage.ref();
var imgRef = storageRef.child('profile-pictures/1.jpg');
// call .then() on the promise returned to get the value
imgRef.getDownloadURL().then(function(url) {
  var pulledProfileImage = url;
  dataArray.push(pulledProfileImage);
});

这将在本地工作，但该 URL 列表不会在所有浏览器之间同步。相反，您想要的是使用数据库来同步 URL，就像我们在 Zero To App 中所做的那样( video 、 code )。