尝试使用 url 显示来自 firebase 存储的图像，但收到错误消息

Question

我正在尝试使用文件名显示来自 firebase 存储的图像。 url 工作并显示在控制台上。 但我收到以下错误： 下面是我的代码：

function getFileUrl(filename) {
  var storage = firebase.storage().ref(filename);
  storage.getDownloadURL().then(function(url) {
    console.log(url);
  })
  .catch(function(error) {
    console.log("error encountered");
  });
} 

var img = document.createElement('img');
img.src = getFileUrl(y);

Answer 1

您没有从getFileUrl返回任何内容，这意味着您将img.src设置为undefined 。 而这正是错误消息告诉您的内容。

但是添加一个简单的return语句是不可能的，因为下载 URL 是从 Firebase 异步加载的。 任何需要下载 URL 的代码都需要在里面或者从then调用。

function createImgForFile(filename) {
  var storage = firebase.storage().ref(filename);
  storage.getDownloadURL().then(function(url) {
    var img = document.createElement('img');
    img.src = getFileUrl(y);
  })
  .catch(function(error) {
    console.log("error encountered");
  });
} 

---

如果你想让它更可重用一点，你可以返回一个 promise 和 URL，这意味着你在调用它时需要一个then ：

function getFileUrl(filename) {
  var storage = firebase.storage().ref(filename);
  return storage.getDownloadURL();
} 

var img = document.createElement('img');
getFileUrl(y).then(function(url) {
  img.src = url;
});

---

如果您发现then处理程序难以阅读，您可以使用async / await作为一些语法糖，使其看起来更熟悉：

function getFileUrl(filename) {
  var storage = firebase.storage().ref(filename);
  return storage.getDownloadURL();
} 

var img = document.createElement('img');
img.src = await getFileUrl(y);