Image does not load in <img> tag with ftp url

Question

I am trying to display a user 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"/> 

Image does not appear in APP (resource error failed to load). 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 a debug build, so I think this is not a resolution problem. I made a whitelist by adding below line in config.xml file,

 <access origin="*"/> 

I tried adding the lines below without any success,

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

Content-Security-Policy has also been added to the html file as follows, still encountering the same problem.

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

It works if I use the http address for img src. Images are stored on the ftp server, so I cannot use the http address. Any suggestion is much appreciated.

Answer 1

You need to install the whotelist cordova plugin and configure your config.xml file.

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

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

Answer 2

You can try changing your src attribute as follows:

  <img src="ftp://yourusername: yourpassword@10.132.21.100 /PatientPhoto/Temp_emp.jpg"/> 

it will work, but you will give everyone your FTP password. Do not use this on a website live.

Answer 3

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

Give src between "" and make sure your server is running

Answer 4

You have the title of the content security policy:

 <meta http-equiv="Content-Security-Policy" 

You will need this on the pages on which the image is displayed.

See the following link for pointers: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/#content-security-policy