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: