Tajuk Baharu: Paparkan Imej daripada Firebase Cloud Storage Blob Menggunakan Vue

Question

Saya sedang membina repositori carian produk di mana pengguna akan mengimbas kod bar produk yang kemudiannya akan mengembalikan data tentang produk bersama-sama dengan gambar produk untuk dipaparkan.

Kini untuk tujuan ujian, saya telah menyediakan baldi Firebase dan memuat naik imej. Saya telah berjaya mendapatkan semula imej itu dengan memanggil api storan firebase, tetapi saya nampaknya tidak dapat memaparkannya dalam apl Vue saya. Nampaknya saya tidak dapat mencari dokumentasi yang betul pada dokumentasi firebase kerana contoh mereka menggunakan js dan html tulen.

Kod saya untuk memaparkan imej:

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

Skrip yang dijalankan apabila halaman dimuatkan, ia mengambil imej daripada baldi dan memaparkannya.

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

Saya tahu panggilan api berfungsi kerana apabila saya menyemak konsol pembangun dalam chrome, saya dapat melihat imej dalam pratonton dalam panggilan api dalam tab rangkaian. Saya nampaknya tidak dapat memaparkannya dalam vue.

Ia menyimpan imej sebagai gumpalan?

Saya telah menambah balasan seperti yang diminta:

Answer 1

Masalahnya mungkin dengan gumpalan paparan Vue. Cuba:

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

Di sini URL.createObjectURL rujukan kepada Blob harus dibuat.

Answer 2

Masalahnya bukan pada gumpalan, tetapi dengan tag vue yang memaparkan imej. Kami menggunakan <img> 代替 <image> seperti yang ditunjukkan di bawah: