如何显示Firebase存储img [英] how to display firebase storage img

问题描述

根据此

例如，输入网址后:

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

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

You would still need to run getDownloadURL, something like this:

storageRef.child(urll).getDownloadURL()

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

This seems counter productive to me, if you already have the image storage url, why need to run getdownload url and wait for a response?

我已将存储空间设为公开.我将如何执行类似的操作(在反应中):

I've set my storage to public. How would I be able to execute something like (in react):

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

Is something like the above example even possible? or var storage = firebase.storage(); var pathReference = storage.ref('images/stars.jpg');

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

Firebase在文档中提供了此示例，但实际上并未提供有关如何合并该示例的任何想法.

Firebase gives this example in the documentations but doesn't actually give any ideas of how to incorporate it.

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

推荐答案

这将帮助您显示图像

<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的原因.

if you try to open image with this link it won't open instead it will provide you json data. You have to provide the downloadTokens of image then it will show. that's why you have to perform the getDownloadUrl() which will generate proper url of image with downloadTokens and alt.

您可以查看显示完整网址的警报.

You can check the alert you see full url.

这篇关于如何显示Firebase存储img的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！