如何显示 Firebase 存储 img

Question

根据this

在你有一个 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');

Answer 1

这将帮助您显示图像

<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"/> 

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

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