0

El código que tengo ya guarda la imagen seleccionada en storage de firebase y en firestore la guardo con el nombre de la imagen, mi problema es cuando consulto la imagen, no puedo mostrarla con 'src', no se como hacer referencia a esa imagen guardada en mi storage.

HTML:

           <div class="form-group">
            <label for="email">Select your image:</label>
            <div class="custom-file">
              <input type="file" class="custom-file-input" (change)="startUpload($event.target.files)">
              <label class="custom-file-label">{{adminJson.fileimg}}</label>
            </div>
          </div>

Se ejecuta la función 'startUpload($event.target.files)', que es la siguiente:

startUpload(event: FileList){
  this.file = event.item(0)
  console.log('FILE: ', this.file)
   if(this.file.type.split('/')[0] !== 'image'){
     console.error('unsupported file type')
   return
   }
this.fileimg = this.file.name
this.path = `admin/${new Date().getTime()}_${this.file.name}`
this.adminJson.fileimg = this.path // Este string lo guardo en la base de datos
this.task = this.storage.upload(this.path, this.file) //Aquí se guarda en el storage
}

Al momento de mostrar la imagen, no sé como hacer referencia a la imagen guardada en mi storage:

    <img src="adminJson.fileimg">
3
  • 2
    agrega tu codigo a tu publicacion.
    – simon
    Commented el 26 jul. 2018 a las 0:06
  • 2
    Intenta crear un ejemplo de tu problema, o agrega tu código detallando las diferentes cosas que probaste para que puedan ayudarte mejor. Puedes leer ¿Como Preguntar? para elaborar mejor la pregunta. Commented el 26 jul. 2018 a las 12:07
  • Ya intenté desenvolver mi problema y añadí mi código. Commented el 26 jul. 2018 a las 18:08

1 respuesta 1

2

En la documentación de angularfire2 encontrarás un ejemplo que resuelve tu problema.

Lo que pasa es que por la manera en que Storage trabaja, la dirección en la que guardes tus archivos [u objetos] no es la misma que la dirección para descargarlos. Esa dirección debes obtenerla de firebase con el método getDownloadUrl() de la referencia de Storage. En tu código se podría aplicar algo así:

// ...
this.path = `admin/${new Date().getTime()}_${this.file.name}`;
const fileRef = this.storage.ref( this.path ); // Creamos una referencia para uso posterior
this.task = this.storage.upload(this.path, this.file);
this.task.snapshotChanges().pipe(
            // Cuando finalice la tarea de carga, pedimos la Url
   finalize(() => this.adminJson.fileimg = fileRef.getDownloadUrl() )
)
.subscribe(); // Nos suscribimos a los cambios para que se ejecute
// ...

Recuerda que tienes que tener tus reglas de Storage en orden para que se pueda descargar a imagen.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.