Neuer Titel: Bild aus Firebase Cloud Storage Blob mit Vue anzeigen
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:
