how to display firebase storage img - firebase

Question

According to this
After you have a URL for example:
http://storage.googleapis.com/example-bda7b.appspot.com/images/someone-Lopez.jpg
You would still need to run getDownloadURL, something like this:
storageRef.child(urll).getDownloadURL()
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}
/>
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 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');

Answer 1

This will help you to show image
<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"/>
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.