Image is not loading in <img> tag with ftp url

Question

I am trying to show the user's photo in my ionic/cordova application using the img tag as follows,

 <img src="ftp://10.132.21.100/PatientPhoto/Temp_emp.jpg" alt="no image"/>

The image is not getting displayed in the APP (failed to load the resource error). But I can view the image if I enter the same URL(ftp://10.132.21.100/PatientPhoto/Temp_emp.jpg) in my android mobile browser. I am running the debug build, so I guess it is not a permission issue. I have done white listing by adding the below line in the config.xml file,

<access origin="*"/>

I tried adding below lines too without any success,

<allow-intent href="ftp://*/*" />
<allow-navigation href="ftp://*/*" />

Also added Content-Security-Policy to the html file as follows, still facing the same issue.

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

It is working if I a use http URL for img src. The images are stored in the ftp server, so I can't use http URL. Any suggestion is highly appreciated.

Answer 1

You need to install cordova whitelist plugin and to config your config.xml file.

Please add the following tag: <allow-intent href="ftp://*/*" />

or if you want to allow everything: <access origin="*">