Nouveau titre : Afficher l'image à partir du blob Firebase Cloud Storage à l'aide de Vue

Question

Je suis en train de créer un référentiel de recherche de produits dans lequel l'utilisateur scannera un code-barres de produit qui renverra ensuite des données sur le produit ainsi qu'une image du produit à afficher.

Maintenant, à des fins de test, j'ai configuré un bucket Firebase et téléchargé une image. J'ai réussi à récupérer l'image en appelant l'API de stockage Firebase, mais je n'arrive pas à l'afficher dans mon application Vue. Je n'arrive pas à trouver la documentation correcte sur la documentation Firebase car leurs exemples utilisent du js et du HTML purs.

Mon code pour afficher l'image :

<template>
  <div class="container">
    <div class="row">
      <div class="col">
        <image v-if="image!==null" :src="image"></image>
      </div>
    </div>
  </div>
</template>

Script qui s'exécute lors du chargement de la page, il récupère l'image du bucket et l'affiche.

<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>

Je sais que l'appel API fonctionne car lorsque je vérifie la console du développeur dans Chrome, je peux voir l'image en aperçu dans l'appel API dans l'onglet Réseau. Je n'arrive pas à l'afficher en vue.

Il stocke les images sous forme de blobs ?

J'ai ajouté la réponse comme demandé :

Answer 1

Le problème peut provenir du blob d'affichage de Vue. Essayez :

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

Ici URL.createObjectURL une référence au Blob doit être créée.

Answer 2

Le problème ne vient pas du blob, mais de la balise vue qui affiche l'image. Nous utilisons <img> 代替 <image> comme indiqué ci-dessous :