Capacitor FileSystem: Paths returned by downloadFile and getUri do not work with img src attribute

[tzdevelopteam]

Bug Report

Plugin(s)

• Capacitor FileSystem 6.0.1

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 6.1.2
  @capacitor/core: 6.1.2
  @capacitor/android: 6.1.2
  @capacitor/ios: 6.1.2

Installed Dependencies:

  @capacitor/cli: 6.1.2
  @capacitor/core: 6.1.2
  @capacitor/android: 6.1.2
  @capacitor/ios: 6.1.2

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

• Android, iOS and Web

Current Behavior

When using the downloadFile and getUri functions from Capacitor FileSystem, the returned file path does not work when used in the img src. I have created a pipe to cache files, but the path returned from the pipe fails to load images.

Expected Behavior

The path returned by downloadFile or getUri should be usable in the img src, allowing cached images to be displayed.

Code Reproduction

import { Pipe, PipeTransform } from '@angular/core';
import { Filesystem, Directory } from '@capacitor/filesystem';

@Pipe({
  name: 'cachedFile',
  standalone: true,
  pure: true,
})
export class CachedFilePipe implements PipeTransform {
  async transform(
    fileUrl?: string,
    fileId?: string,
  ): Promise<string | undefined> {
    if (!fileUrl || !fileId) return fileUrl;

    const cachedFile = await this.getFileFromCache(fileId);
    return cachedFile ?? this.cacheFile(fileUrl, fileId);
  }

  private async getFileFromCache(fileId: string): Promise<string | undefined> {
    try {
      const { uri } = await Filesystem.getUri({
        directory: Directory.Cache,
        path: fileId,
      });
      return uri;
    } catch (error) {
      return undefined;
    }
  }

  private async cacheFile(
    fileUrl: string,
    fileId: string,
  ): Promise<string | undefined> {
    try {
      const { path } = await Filesystem.downloadFile({
        path: fileId,
        url: fileUrl,
        directory: Directory.Cache,
      });
      return path;
    } catch (error) {
      return fileUrl;
    }
  }
}

Other Technical Details

• @ionic/angular: 8.3.2

Additional Context

I have tried using both the getUri and downloadFile functions from Capacitor FileSystem, but neither seems to return a path that works with the img src attribute. This issue happens consistently, and the images do not display as expected.