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


#1

Hello,

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:

    $compileProvider.imgSrcSanitizationWhitelist(/^\s(https|tel|ftp|file|blob|content|ms-appx|x-wmapp0|cdvfile):|data:image\//);

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.


#2

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) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(local|http|https|app|tel|ftp|file|blob|content|ms-appx|x-wmapp0|cdvfile):|data:image\//);

#3

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:

Class:

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

constructor(private DomSanitizer: DomSanitizationService) {}
Template:

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

Where imgSrcProperty is the offending image base64 encoded.