1

estoy trabajando en un proyecto de angular donde almaceno datos de servicios en Firebase Firestore y las imágenes en Firebase Storage, mi duda surge cuando llamo a dichos datos en Firestore, me los retorna normal pero con un campo de esos datos necesito hacer la comprobación si existe una imagen con dicho valor retornado. Espero me entiendan y puedan ayudarme. Les dejo mi código:

fetchAllServices() {
  return this.firestore.collection < Service > ('services', ref => ref.orderBy('order', 'asc')).valueChanges().pipe(take(1)).pipe(
    map(changes => {
      return changes.map((c: Service) => {
        let service: any;
        const tools = (Array.isArray(c.tools)) ? (
          c.tools.map(tool => {
            const toolImageUrl = this.getImageTool(tool.image);
            return { ...tool,
              urlImage: toolImageUrl
            };
          })) : null;
        const serviceImageUrl = (c.image !== undefined) ? this.getImageService(c.image) : null;
        const serviceImageThumbUrl = (c.image_thumb !== undefined) ? this.getImageThumb(c.image_thumb) : null;
        service = { ...c,
          urlImage: serviceImageUrl,
          urlImageThumb: serviceImageThumbUrl,
          tools
        };
        return service;
      });
    })
  );
}

getImageService(serviceImageName: string) {
  return this.storage.ref(`services/images/${serviceImageName}.jpg`).getDownloadURL();
}

getImageThumb(serviceImageThumbName: string) {
  return this.storage.ref(`services/images/${serviceImageThumbName}.png`).getDownloadURL();
}

getImageTool(toolImageName: string) {
  return this.storage.ref(`tools/images/${toolImageName}.png`);
}

El detalle está cuando el archivo no existe en Firebase: en la consola del navegador me retorna lo siguiente

Unhandled Promise rejection: FirebaseStorageError  {
  code_: "storage/object-not-found",
  message_: "Firebase Storage: Object 'services/images/undefined.png' does not exist.",
  serverResponse_: "{↵  "
  error ": {↵    "
  code ": 404,↵    "
  message ": "
  No… not get object ",↵    "
  status ": "
  GET_OBJECT "↵  }↵}",
  name_: "FirebaseError"
};
Zone: < root > ;
Task: Promise.then;
Value: FirebaseStorageError  {
  code_: "storage/object-not-found",
  message_: "Firebase Storage: Object 'services/images/undefined.png' does not exist.",
  serverResponse_: "{↵  "
  error ": {↵    "
  code ": 404,↵    "
  message ": "
  No… not get object ",↵    "
  status ": "
  GET_OBJECT "↵  }↵}",
  name_: "FirebaseError"
}
undefined

1 respuesta 1

0

:D Hasta donde sé, el método .getDownloadURL() retorna una promesa, entonces podrías intentar lo siguiente:

getImageService(serviceImageName: string) {
  return this.storage.ref(`services/images/${serviceImageName}.jpg`).getDownloadURL()
    .then(url => url) // Si todo bien, retorna la URL
    .catch(error => {
      // Error, puede que no exista la imagen
      console.log('Error:', error)
      return null;
    })
}

Referencia: https://firebase.google.com/docs/storage/web/download-files#download_data_via_url


Aparte, creo que podrías reducir los métodos getImageService(), getImageThumb() y getImageTool() a una sola función getImage():

getImage(ImageName: string, Path: string, Extension: string) {
  return this.storage.ref(`${Path}/${ImageName}.${Extension}`).getDownloadURL()
    .then(url => url) // Si todo bien, retorna la URL
    .catch(error => {
      // Error, puede que no exista la imagen
      console.log('Error:', error)
      return null;
    })
}

E implementarla así:

fetchAllServices() {
  return this.firestore.collection < Service > ('services', ref => ref.orderBy('order', 'asc')).valueChanges().pipe(take(1)).pipe(
    map(changes => {
      return changes.map((c: Service) => {
        let service: any;
        const tools = (Array.isArray(c.tools)) ? (
          c.tools.map(tool => {
            const toolImageUrl = this.getImage(tool.image, 'tools/images', 'png');
            return { ...tool,
              urlImage: toolImageUrl
            };
          })) : null;
        const serviceImageUrl = this.getImage(c.image, 'services/images', 'jpg');
        const serviceImageThumbUrl = this.getImage(c.image_thumb, 'services/images', 'png');
        service = { ...c,
          urlImage: serviceImageUrl,
          urlImageThumb: serviceImageThumbUrl,
          tools
        };
        return service;
      });
    })
  );
}

Intenta a ver y me avisas que tal :D

Tu Respuesta

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

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