Image displaying issue with ng-repeat

ionic-v1
1

I have a json of image name. i am displaying image using ng-repeat. That is not working.
Ex-

<ion-slide-box on-slide-changed="slideChanged(index)">
            <ion-slide  ng-repeat="index in practicSupportSlideMenuDisplay">
                <div id="contant"  class="slideContent">
                    <div class="imageBackground">
					<div class="image"><img  style="width: 100%"  ng-src='img/{{index.supportIndexDetailImg}}.png' ></div>
                    </div>
                    <div class="display-contant">
                        <div class="padding">
                            <button type="button" id="submit" class="button" ng-click="downloadeFileFromServer()">Get a Copy</button>
                        </div>
                    </div>
                </div>
            </ion-slide>
        </ion-slide-box>

If i am using hard coded like
"<img style="width: 100%" src="img/practic_support_display_center_btn_bg.png">"
and if i using base64 image url the windows phone 8 app giving performance issue.

Is there any solutionā€¦?? please reply ā€¦

2

Try replacing the src with ng-src? Any chance you could put a codepen together?

3

@ mhartington :- In both case.

4

Ah didnā€™t see the ng-src in the pasted code. Is this on android or iOS? Which version of ionic are you using? Are the images local or are the being loaded from a server?

5

I am also having the same issue from past three days. I working on android device.

I am getting list of images and path say (content://media/external/images/media/17); when i tried to bind to its not working. seems there is some issue. any idea. (Image is a servicet which contains its path). (Basically, Path=ā€œcontent://media/external/images/media/17ā€).

6

@ mhartington :-
I am developing app for windows phone 8 and image being loaded from local from ā€œimgā€ folder
But i try both ng-src and src. it is not working.

7

Ah alright, if itā€™s windows phone, a thing to remember is that any kind of src-urls have to be whitelisted.

See this post on stack overflow.

Because the web view on windows phone is IE, you have to deal with all the issues that come with IEā€¦

8

Then what should i do?Tell me any solution for that?
But In IE browser. src and ng-src is working on PC.

9

If you read the stack overflow post, youā€™ll see that you have to white list the url to your images in your config set up.

.config(function ($stateProvider, $urlRouterProvider, $compileProvider) {
       $compileProvider.imgSrcSanitizationWhitelist('img/');
10

Does index.supportIndexDetailImg has the same value as "practic_support_display_center_btn_bg"?

If the image URI starts with content:// or file://, it wonā€™t work. If thatā€™s the case, then just change to src="{{index.supportIndexDetailImg}}".

11

@fredericoā€‹galvao -
Yes

12

@@ mhartington :- Now image is start displaying. I am trying last two days. Thanks a lot ā€¦ :slight_smile: :slight_smile:

13

One more query for you. How to download file(pdf/image/ppt) from server?
I am trying from last week. :frowning: if you have any solution please post the codeā€¦

14

Hmm, not too sure about that. But it sounds like you need to have access the devices file system, so check our cordovaā€™s file system plugin.

http://plugins.cordova.io/#/package/org.apache.cordova.file

15

@mhartington- I used plugin. Now file is downloading but where it is downloading in windows phone 8 . I am not able to find.Because, i want to open that file. After success full download. Can you help me?

16

Hi guys, I have the same issue (on Android and iOS) and I canā€™t find a way to fix it.

If I use this code:

<a ng-repeat="category in rows">
  <img ng-src="img/{{category.title}}.png">
</a>

Images are not displayed on the device, but if I hard-code the image name like

<a ng-repeat="category in rows">
  <img ng-src="img/paper.png">
</a>

it will display correctly.

Needless to say, I have already tried mharingtonā€™s solution

.config(function ($stateProvider, $urlRouterProvider, $compileProvider) {
   $compileProvider.imgSrcSanitizationWhitelist('img/');

with no success.

The issue is happening only on devices, itā€™s all good on browsers and simulators. Any idea?

17

Hi @igghera,

Above code is working in Android and windows both for me.

Try replace
$compileProvider.imgSrcSanitizationWhitelist(ā€˜img/ā€™);
to
$compileProvider.imgSrcSanitizationWhitelist(//img|ā€¦/\b/);

May be there is some other issue.
Can you create codepen ?

1 Like
18

Hi @shashikant,

thanks for your reply. I will create a codepen as soon as I get home.

I have tried your option but it didnā€™t work :frowning:

The real problem is I donā€™t know how to debug it! I mean, I run

ionic run android

and look at my phone, but I have no debugging tools to see what the error is. How do you debug your apps?

19

1)Check in Firebug. If there is any error in browser(Except NetworkError: 404 Not Found cordova.js".)
2)Using alert().

20

When I test it on the browser (and simulator) there is not error (apart from cordova.js not found).
Re: alert, itā€™s not so useful in this case, is it? I wish I could debug it with an IDE or something similar :frowning: