How to save image from url into assets folder

Question

I am using Ionic with Cordova to develop my first Android app and i need to retrieve an image from a REST api and store it on my device, so then i can use it even if the device is offline.

This are the current versions im using:

Ionic:

Ionic CLI: 6.10.1 (C:\Users\agusd\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework: @ionic/angular 5.3.1 @angular-devkit/build-angular: 0.901.12 @angular-devkit/schematics: 9.1.12 @angular/cli: 9.1.12 @ionic/angular-toolkit: 2.3.0

Capacitor:

Capacitor CLI: 2.4.0 @capacitor/core: 2.4.0

Cordova:

Cordova CLI: 9.0.0 (cordova-lib@9.0.1) Cordova Platforms: android 8.1.0 Cordova Plugins: cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

I was following a guide meant for Ionic 3 but I couldn't make it work on my current Ionic version.

So far, I have managed to get the JSON object which contains the URL, but i don't know how to download that image and store it into my assets folder.

My code is like this:

api.service.ts:

apiURL = 'my api url...';
 getDiarios() {
    const diarioArgs = {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json' }
    };
    return this.http.get(this.apiURL, diarioArgs);
  }

Then i have this function, that calls the service and retrieves the response:

data: any;
lastDiario: any;
lastID = 0;

loadLastDiario() {
    try {
      this.apiService.getDiarios().subscribe(
        (data) => {
          this.data = data;
          for (const item of this.data.content) {
            if (item.id > this.lastID) {
              // I get the object with the largest id, which means is the last uploaded
              this.lastID = item.id;
              this.lastDiario = item;
            }
          }
          console.log(this.lastDiario);
          for (const item of this.lastDiario.archivos) {
            // Here is where I need to save every item of "archivos" into my assets folder or any other
            // Every item has an URL property that I can get through **this.lastDiario.archivos.url**
          }
        }
      );
    } catch (error) {
      console.log("Couldn't connect to the service")
    }
  }

If someone could help me, im new to Ionic and Angular in general so any advice will help!

Answer 1

The assets folder is read only at run time.

You can only store files in it during design time.