New Title: Display Image from Firebase Cloud Storage Blob Using Vue

Question

I'm building a product lookup repository where the user will scan a product barcode which will then return data about the product along with a picture of the product to display.

Now for testing purposes I have set up a Firebase bucket and uploaded an image. I have successfully retrieved the image by calling the firebase storage api, but I can't seem to display it in my Vue app. I can't seem to find the correct documentation on the firebase documentation as their examples use pure 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>

A script that runs when the page loads, it fetches the image from the bucket and displays 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 in the api call in the network tab. I can't seem to display it in vue.

Does it store images as blobs?

I have added the reply as requested:

Answer 1

The problem may lie in the Vue display Blob. try:

xhr.onload = event => {
  this.image = URL.createObjectURL(xhr.response);
  event.preventDefault();
};

Here URL.createObjectURL A reference to the Blob should be created.

Answer 2

The problem is not with the blob, but with the vue tag that displays the image. We use <img> instead of <image> like this: