Neuer Titel: Bild aus Firebase Cloud Storage Blob mit Vue anzeigen

Question

Ich erstelle ein Produktsuch-Repository, in dem der Benutzer einen Produktbarcode scannt, der dann Daten über das Produkt zusammen mit einem Bild des Produkts zur Anzeige zurückgibt.

Jetzt habe ich zu Testzwecken einen Firebase-Bucket eingerichtet und ein Bild hochgeladen. Ich habe das Bild erfolgreich durch Aufrufen der Firebase-Speicher-API abgerufen, kann es jedoch anscheinend nicht in meiner Vue-App anzeigen. Ich kann anscheinend nicht die richtige Dokumentation in der Firebase-Dokumentation finden, da ihre Beispiele reines JS und HTML verwenden.

Mein Code zum Anzeigen des Bildes:

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

Skript, das beim Laden der Seite ausgeführt wird, das Bild aus dem Bucket abruft und anzeigt.

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

Ich weiß, dass der API-Aufruf funktioniert, denn wenn ich die Entwicklerkonsole in Chrome überprüfe, kann ich das Bild in der Vorschau im API-Aufruf auf der Registerkarte „Netzwerk“ sehen. Ich kann es scheinbar nicht in Vue anzeigen.

Es speichert Bilder als Blobs?

Ich habe die Antwort wie gewünscht hinzugefügt:

Answer 1

问题可能出在 Vue 显示 Blob 上。尝试：

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

此处 URL.createObjectURL 应创建对 Blob 的引用。

Answer 2

问题不在于blob，而在于显示图像的vue标签。我们使用 <img> 代替 <image>，如下所示：