title: In Ionic Framework (v5), how do you use blob images saved in the data directory as inline and background images?
body: <p>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.</p>
  
  <p>Here is the function:</p>
  
  <pre><code>downloadProductImages(products) {
    return new Promise((resolve, reject) =&gt; {
      this.platform.ready()
        .then(() =&gt; {
          for (let i = 0; i &lt; 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) =&gt; {
                this.file.writeFile(this.directory, fileName, response, {replace: true})
                  .then(_ =&gt; {
                    resolve();
                  })
                  .catch(error =&gt; {
                    reject();
                  });
              })
              .catch(error =&gt; {
                reject();
              });
          }
        });
    });
  }
  </code></pre>
  
  <p>Here is the page view I would like the images to render:</p>
  
  <pre><code>&lt;div [ngStyle]="{'background-image': 'url(\'' + (productImage !== '' ? productImage : '../../assets/images/image-not-available.png' | sanitizeUrl) + '\')'}"&gt;
    &lt;ion-row&gt;
      &lt;ion-col size="12" size-sm="6"&gt;
        &lt;div class="show-mobile"&gt;
          &lt;img [src]="(productImage !== '' ? productImage : '../../assets/images/image-not-available.png' | sanitizeUrl)" class="img-responsive"&gt;
        &lt;/div&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  &lt;/div&gt;
  </code></pre>