Estoy creando un repositorio de búsqueda de productos, los usuarios escanearán un código de barras del producto que luego devolverá datos sobre el producto y una imagen del producto que se mostrará.

En este momento, con fines de prueba, configuré un depósito de almacenamiento de Firebase, con una imagen cargada. He podido recuperar la imagen con éxito llamando a la API de almacenamiento de Firebase, pero parece que no puedo mostrarla en mi aplicación Vue. Parece que no puedo encontrar la documentación adecuada para esto en los documentos de firebase, ya que su ejemplo usa js simple y html.

Mi código para mostrar la imagen:

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

El script que se ejecuta cuando se monta la página y obtendrá la imagen del depósito de almacenamiento y la mostrará.

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

Sé que la llamada a la API funciona porque cuando consulto la consola del desarrollador en Chrome, puedo ver la imagen en vista previa en la llamada a la API en la pestaña de redes. Parece que no puedo mostrarlo en vue.

¿Almacena la imagen como blob?

He agregado las respuestas según lo solicitado: