0
744
ViewsVue display an image from firebase cloud storage blob
Im building a product lookup repository, users will scan a product barcode which will then return data about the product and a picture of the product to be displayed.
Right now for testing purposes I have set up a firebase storage bucket, with one image uploaded. Im have successfully been able to retrieve the image by calling the firebase storage api, but I cant seem to display it in my Vue app. I cant seem to find the proper documentation for this on firebase docs, as their example uses plain js and html.
My code to display the image:
<template>
<div class="container">
<div class="row">
<div class="col">
<image v-if="image!==null" :src="image"></image>
</div>
</div>
</div>
</template>
The script that runs when the page is mounted and it will get the image from the storage bucket and display it.
<script>
import firebase from "firebase";
export default {
name: "ProductPage",
data: () => {
return {
image: null
};
},
mounted() {
firebase
.storage()
.ref("test/1234-1.jpg")
.getDownloadURL()
.then(url => {
const xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.onload = event => {
this.image = xhr.response;
event.preventDefault();
};
xhr.open("GET", url);
xhr.send();
})
.catch(error => {
// Handle any errors
console.log(error);
});
}
};
</script>
I know the api call works because when I check the developer console in chrome, i can see the image in preview on the api call in the networks tab. I just cant seem to display it in vue.
It stores the image as blob?
I have added the responses as requested:
2 answers
Answer question0
The problem might be with Vue displaying Blob. Try:
xhr.onload = event => {
this.image = URL.createObjectURL(xhr.response);
event.preventDefault();
};
Here the URL.createObjectURL should create a reference to the Blob.
0
The problem lies not in the blob, but the vue tag to display the image. Instead of <image> we use <img> like this:
<img v-if="image !== null" :src="image" class="img-circle" alt="Services">