How to download image from url and save in desire folder in capacitor

Capacitor
1

Good day,

I am trying to download an image and save it into desired folder. For this, I am using capacitor filesystem.

Here is my code:

async fileWrite(fileUrl,name) {
    console.log("inside");
    try {
      const result = await Filesystem.writeFile({
        path: name,
        data: fileUrl,
        directory: FilesystemDirectory.Data,
        encoding: FilesystemEncoding.UTF8
      })
      console.log('file Downloaded', result);
      this.readFile(result.uri,name);
    } catch(e) {
      console.error('Unable to write file', e);
    }
  }

  async readFile(pth,name){
    Filesystem.readFile({
      encoding: FilesystemEncoding.UTF8,
      path: pth
    }).then(
      result => {
        // let path = Capacitor.convertFileSrc(result.uri);
        // console.log(path);
        this.src = result.data;
      },
      err => {
        console.log(err);
      }
    );
   
  }

Calling function like this:

<img src='{{src}}'>
  <button (click)="fileWrite('https://ionicframework.com/blog/wp-content/uploads/2018/02/intro-capacitor-header.jpg','dummyImage.jpg')">Downloads</button>

What the above code does:
It does show the image but not with the local url (using webURL), although I passed the local url to read it.
What I am doing wrong ??