Cordova-plugin-ionic-webview: Unable to load local image on IOS

Created on 22 Mar 2019  路  6Comments  路  Source: ionic-team/cordova-plugin-ionic-webview

Hi,
I am having issue showing image on iOS. I have tried by adding the allow-intent and allow-navigation as described in description but no luck
Here is my url which is setting in img src

/Users/mok/Library/Developer/CoreSimulator/Devices/73389B7A-857D-4C23-BBDD-75D7DBC4EA44/data/Containers/Data/Application/64CCDDD1-4824-4031-AB6A-B0B89C081BD2/tmp/cdv_photo_076.jpg

if i add prefix of 'file://' in it. It throw error of 'Not allowed to load local resource'
I also add

<allow-navigation href="httpsionic://*" /> <preference name="iosScheme" value="httpsionic" />
and when I am adding prefix in image httpsionic:// it is still not showing me image

I need to resolve this asap, because due to this my build is stopped. I was using the previous version of this plugin and that was working fine. I just upgrade it to the latest version and having this issue.
Any help would be appreciated. Thanks

Most helpful comment

You have to use window.Ionic.WebView.convertFileSrc(); function.
Also, if using angular you need to sanitize it

All 6 comments

You have to use window.Ionic.WebView.convertFileSrc(); function.
Also, if using angular you need to sanitize it

@jcesarmobile I also tried that and still unable to load image. What i did was i wrap angular domSanitizer in convertFileSrc i.e.
this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

URL in img src now is:
unsafe:SafeValue must use [property]=binding: ionic://localhost/_app_file_/Users/mok/Library/Developer/CoreSimulator/Devices/73389B7A-857D-4C23-BBDD-75D7DBC4EA44/data/Containers/Data/Application/37EB2B30-791E-4A00-B6C0-4EB9DE22B336/tmp/cdv_photo_084.jpg (see http://g.co/ng/security#xss)

And still receiving error
Failed to load resource: unsupported URL

Thanks

Thanks @jcesarmobile!
Issue is resolved from this:
this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

I was using the wrong src in html
src='{{imageUrl}}'
should be like this
[src]='imageUrl'

this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

this solved to me

Obrigado @mowaiskalam !
this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

Where do you put this ?

in your app, wherever you are going to use a file:// or content:// path in the src of html elements such as img, audio or video tags.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

CodeWithOz picture CodeWithOz  路  8Comments

alexverbitsky picture alexverbitsky  路  3Comments

acollazomayer picture acollazomayer  路  3Comments

slymeng picture slymeng  路  5Comments

BorntraegerMarc picture BorntraegerMarc  路  5Comments