Display images via html img tag with angular and ionic

Question

I'm currently making a hybrid mobile app with ionic and Angularjs, and I'm trying to display images using the img html tag. My page consists of a carousel at the top (which works well, it displays images) and a list with small images. My page controller has:

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 on 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 in a browser, everything works fine. But when I try to work on my smartphone, the carousel is working, it displays images, but images are not displayed in the list, fuzzy {{artwork.img}} show me all the images. I am doing my best:

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

Apparently the binding is wrong ... Do you have an idea why? And how to solve this ?! Moreover, on my smartphone the path to the images looks like this: "cdvfile: // localhost / persistent / ...". The carousel works well, but the list of images does not work, and when I translated "cdvfile: // localhost / persistent / ..." to "file: // mnt / sdcard / ...", it works. Why?

Answer 1

I will finally find the answer. The problem is that angularjs prevents XSS attacks through the html link using the imgSrcSanitizationWhitelist function . Thus, the path to the image starting with "cdvfile: // localhost / persistent" is the prefix "unsafe:", so the image is not displayed. To get around this problem, I had to override this method to do this in my configuration 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\//); } ]); 

Discussion with answer

Answer 2

---

I had the same problem, but it was solved simply by linking to images relative to the index.html file, and not to an absolute link to the URL.

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

Answer 3

There is another situation that may result in the img tag not being resolved. I was porting HTML5 webapp to a hybrid application and ran into the problem above while img tags would not be resolved. In my routing initialization, I called:

 $locationProvider.html5Mode(true); 

This seems like a problem with finding img src for local installation (unless on an Android device I tested iOS). Given that this code is really not required if you are not rendering in the browser, I removed the code for the hybrid application.

Answer 4

I know it has been a while, but I found that I have the same problem with Ionic 3. This was resolved simply by changing:

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

:

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

I was hoping this helped someone.