Display images through html img tag with angularjs and ionic

Question

I'm currently doing an hybrid mobile app with ionic and Angularjs and i'm trying to display images through an img html tag. My page is composed of a caroussel at the top (which works well, it displays images) and a list with small images. In the controller of my page there is :

app.controller('SalleCtrl', function ($scope,$location) {

$scope.salle = {
    "num": "2",
    "imgR": [
        "img/art_affiche_6_thumb-300x300.jpg",
        "img/art_affiche_6_thumb-300x300.jpg"
    ],
    "title": "Salle 2 : Premières peintures",
    "_audio_guide": [],
    "_audio_guide_fe": [],
    "_audio_guide_en": [],
    "artworks": [
        {
            "img": "img/art_affiche_6_thumb-300x300.jpg",
            "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-14-2/",
            "title": "Oeuvre 14"
        },
        {
            "img": "img/art_affiche_9_thumb-300x300.jpg",
            "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-3/",
            "title": "Oeuvre 3"
        }
    ]
};
});

And in my html page there is :

<ion-view title="{{salle.title}}">

<ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" id="" >
    <ul rn-carousel class="image">
         <li ng-repeat="image in salle.imgR" style="background-image:url({{ image }});background-color:black;background-repeat:no-repeat;background-position:center center;background-size : contain;"> 
        </li>
    </ul>

    <div class="list">
        <a ng-repeat="artwork in salle.artworks" class="item item-avatar" href="{{artwork.href}}">
          <img ng-src="{{artwork.img}}">
          <h2>{{artwork.title}}  {{artwork.img}}</h2>   
        </a>
    </div>

</ion-content>

When I display it on a browser everything works well. But when I try on my smartphone the caroussel works, it displays images, but the list doesn't show the images, unstead of {{artwork.img}} show me all the images. I try to :

1. replace 'ng-src' by 'src' but nothing happens
2. replace ng-src="{{artwork.img}}" by ng-src="img/art_affiche_6_thumb-300x300.jpg" it works.

Apparently the binding is not correctly made... Have you any idea why? And how resolve it?! Moreover on my smartphone, the path of the images looks like "cdvfile://localhost/persistent/...". The caroussel works well, but the list of image doesn't works, and when I translate "cdvfile://localhost/persistent/..." to "file://mnt/sdcard/..." it works. Why?!

Answer 1

I finally find the answer. The problem is due to the fact that angularjs prevent XSS attacks via html link with the function imgSrcSanitizationWhitelist. So the image path which begin with 'cdvfile://localhost/persistent' is prefix by "unsafe:" and so the image is not display. In order to get around this problem I had to override this method, to do that in my config of my main module I add this code :

var app = angular.module( 'myApp', [] )
     .config( ['$compileProvider',function( $compileProvider ){ 
         $compileProvider.imgSrcSanitizationWhitelist(/^\s(https|file|blob|cdvfile):|data:image\//);
       }
     ]);

The discussion with the answer

Answer 2

---

I had the same issue, but it was resolved by simply referencing the images relative to the index.html file, not absolute referencing based on the URL.

I had img src="/hello.jpg" when it needs to be img src="hello.jpg". :)

Answer 3

There is another situation that can cause the img tag to not resolve. I was porting an HTML5 webapp to a hybrid app and encountered the issue above, in a view the img tags won't resolve. In my routing initialization I was calling:

$locationProvider.html5Mode(true);

This seems to cause an issue with finding the img src on the local install(unless on android device, I have not tested on IOS ). Given that this code is not really required unless you are rendering in a browser, I have removed the code for the hybrid app.

Answer 4

I know this has been a while, but I found my self having same problem with Ionic 3. It was resolved simply by changing:

    <img ng-src="{{artwork.img}}">

to this:

    <img ng-src={{artwork.img}}>

I hoped this helped someone.