时间戳

首页 > 解决方案 > 如何显示 Firebase 存储 img

firebase - 如何显示 Firebase 存储 img

问题描述

据此_

例如，在您拥有 URL 之后：

http://storage.googleapis.com/example-bda7b.appspot.com/images/someone-Lopez.jpg

您仍然需要运行getDownloadURL，如下所示：

storageRef.child(urll).getDownloadURL()

这对我来说似乎适得其反，如果您已经有了图像存储 url，为什么需要运行 getdownload url 并等待响应？

我已将我的存储设置为公开。我将如何能够执行类似（反应）的事情：

  <img
    alt={props.data.last}
    className="rounded-circle"
    src={http://storage.googleapis.com/example-bda7b.appspot.com/images/someone-Lopez.jpg}
  />

像上面的例子有可能吗？或 var storage = firebase.storage(); var pathReference = storage.ref('images/stars.jpg');

  <img
    alt={props.data.last}
    className="rounded-circle"
    src={pathReference}
  />

Firebase 在文档中给出了这个例子，但实际上并没有给出如何合并它的任何想法。

// Create a reference with an initial file path and name
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

标签： firebase

解决方案

这将帮助您显示图像

<script>
function showimage() {
    var storageRef = firebase.storage().ref();
    var spaceRef = storageRef.child('sweet_gift/vytcdc.png');
    storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
        var test = url;
        alert(url);
        document.querySelector('img').src = test;
    }).catch(function(error) {
    });
}
</script>
<input type="button" value ="view Image" id="viewbtn" onclick="showimage();">
<img src="test" height="125px" width="200px"/>

如果您尝试使用此链接打开图像，它将不会打开，而是会为您提供 json 数据。您必须提供图片的 downloadTokens 才会显示。这就是为什么您必须执行getDownloadUrl()将使用 downloadTokens 和 alt 生成正确的图像 url 的原因。

您可以检查您看到完整网址的警报。

推荐阅读