In Ionic Framework (v5), how do you use blob images saved in the data directory as inline and background images?

I have also posted this on Stack Overflow…

I created a function for downloading and saving the blob images so that if the user is offline, the images can still be rendered. I have to do it this way as the products are managed via a CMS.

Here is the function:

downloadProductImages(products) {
  return new Promise((resolve, reject) => {
    this.platform.ready()
      .then(() => {
        for (let i = 0; i < products.length; i++) {
          const productImageUrl = SERVER_URL + products[i].imageUrl,
                fileName = products[i].image;
          this.http
            .sendRequest(productImageUrl, {
              method: 'download',
              filePath: this.directoryPath + fileName,
              responseType: 'blob'
            })
            .then((response: any) => {
              this.file.writeFile(this.directory, fileName, response, {replace: true})
                .then(_ => {
                  resolve();
                })
                .catch(error => {
                  reject();
                });
            })
            .catch(error => {
              reject();
            });
        }
      });
  });
}

Here is the page view I would like the images to render:

<div [ngStyle]="{'background-image': 'url(\'' + (productImage !== '' ? productImage : '../../assets/images/image-not-available.png' | sanitizeUrl) + '\')'}">
  <ion-row>
    <ion-col size="12" size-sm="6">
      <div class="show-mobile">
        <img [src]="(productImage !== '' ? productImage : '../../assets/images/image-not-available.png' | sanitizeUrl)" class="img-responsive">
      </div>
    </ion-col>
  </ion-row>
</div>

1 post - 1 participant

Read full topic