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

【问题标题】：Trying to display image from firebase storage using url but get an error message尝试使用 url 显示来自 firebase 存储的图像但收到错误消息
【发布时间】：2020-05-11 23:36:54
【问题描述】：

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

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);

【问题讨论】：

标签： javascript firebase firebase-storage

【解决方案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");
  });
}

如果你想让它更可重用，你可以返回一个带有 URL 的 Promise，这意味着你在调用它时需要一个 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);

【讨论】：