JPEG images don't render because of "unsafe:" prefix while PNG images show fine


I am displaying some JPG images from the app folder but they don’t render because Ionic/Angularjs adds the unsafe: prefix. When images are converted to PNG they are displayed without any problems, and are shown both in the browser and on ios/android.

I am not sure if it has anything to do with whitelisting, since the JPG files are not external but are located inside the app folder. Just in case I added the following in my app.js:


also just in case added:

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

…but this did not help.

The template is located at www/templates/section1/myfile.html and accesses the image as

<img src="images/section1/some_image.jpg">

I also tried

<img ng-src="images/section1/some_image.jpg">

but this made no difference.

Manually removing the unsafe: from the generated URL displays the JPG image, so I understand the path is correct.

This is frustrating and searching the docs does not return anything about what might be causing it. I would prefer avoiding converting all the JPG files to PNG.

Would be grateful if anyone could help bring some light into this.

Thank you.

omg, I can’t believe how much time I have spent trying to figure out a small thing like this…

This is what fixed the JPG images:

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $compileProvider) {

For ionic 2 rc After a long day of searching Here comes the solution

copied here
For anyone experiencing this issue, I have ‘solved’ it by using the following:


import {DomSanitizer} from ‘@angular/platform-browser’;

constructor(private DomSanitizer: DomSanitizationService) {}

<img [src]=“DomSanitizer.bypassSecurityTrustUrl(imgSrcProperty)”/>

Where imgSrcProperty is the offending image base64 encoded.