Remote image http:// changes to file://

ionic-v1
1

Here is the offending code:

<cl-image public-id="{{diningHall.image}}" class="inline"format="jpg">
   <cl-transformation crop="limit" quality="70"/>
</cl-image>

When I run the code on Android or iOS, the code turns to

<img ng-transclude="" public-id="swipes1_tc52xv" class="inline" format="jpg" src="file://res.cloudinary.com/swipes/image/upload/c_limit,h_120,q_100/swipes1_tc52xv.jpg"></img>

As you can see, the source becomes “file://” and not “http://”. This makes the file not appear. When I use Chrome Dev tools to manually change the “file://” to “http://”, the image loads as expected. Another thing to note is that using ionic serve, the images load just fine.

My content security settings:

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

And finally config.xml

<access origin="*"/>
<allow-navigation href="*"/>
<allow-navigation href="http://res.cloudinary.com" />
2

Not really an Ionic issue, it’s either a problem in your angular code or in cloudinary directive

3

I am pleased to announce a solution to this problem.

In the jquery.cloudinary.js file, change line 338 to the following:

    // edited 
    // var prefix = secure ? 'https://' : (window.location.protocol === 'file:' ? "file://" : 'http://');
    var prefix = secure ? 'https://' : (window.location.protocol === 'file:' ? 'http://' : 'http://');
    
    prefix = protocol ? protocol + '//' : prefix;

window.location.protocol does indeed return “file:”. Don’t know what it means, just know that my images work now.