CapacitorJS iOS View Image File from Filesystem

Capacitor
1

Hi Guys,

I’m sly new to the capacitor and I’ve built a capacitor app that uses the standard camera plugin to take photos and pic images from the photo library.

In iOS, the preview isn’t working as expected for an unknown reason. The file is saved permanently [ i can use the base64 file read option and see the image, but it is not memory efficient as there are 10s of images to show ]

The following code is working fine on Android and for many people, this seems to work on iOS as well.

Unfortunately, this same code does not work in iOS [ in real device ]

         const finalPhotoUri = await Filesystem.getUri({
            directory: FilesystemDirectory.Data,
            path: fileName
          })

          this.imgSrc = Capacitor.convertFileSrc(finalPhotoUri.uri)

        <img src="imgSrc" > // used this way in html template.

Are there any changes we should make to index.html [ content-security ] or iOS info.plist for this work?

I did allow arbit URLs to load in NSAppTransportSecurity.

Please suggest some hacks to get this working. Thanks in advance.

Cheers,
Sachin

2

Probably too late but it can’t be usefull for someone else.

You have to use Capacitor.convertFileSrc AND sanitizer.bypassSecurityTrustUrl

Install npm install @angular/platform-browser

import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer) { } 
this.imgSrc = this.sanitizer.bypassSecurityTrustUrl(Capacitor.convertFileSrc(finalPhotoUri.uri))

It’s OK on the last IOS version