Image not showing, although data coming successful back from http request (Ionic)

Question

I am working on an Ionic project and via json I was able to readout my data in the view. But for some reason my image won't come through.

Here is a screenshot of my console:

As you can see from the picture the data is coming in correctly.

My html code:

  <ion-list>
      <div ng-repeat="newsItem in newsItems">
        <a href="#">
            <img ng-src="{{newsItem.picture}}" width="80" height="80">
            <p>{{newsItem.name}}</p>
        </a>        
      </div>
  </ion-list>

Anyone has an idea why the image is not showing?

score 1 · Accepted Answer · answered Nov 11 '15 at 08:04

1

ok, first you jsfiddle is broken ! but no biggie, just remove ';' from the first line. Second your json news doesn't have a pictures it's just this ...

{"newsID":"58","name":"Chemicar presentation","idk":"new","kind":"news","picture":"58.jpg","picture1":"","start_time":"1446073201"}

You are binding to {{newsItem.picture}} and as you can see your picture it's there as a 58.jpg but this is not a picture it's just a string of picture name, so that's why it's not showing anything in the html!

answered Nov 11 '15 at 08:04

macrog

2,085
1
22
30

ok thanks, so i guess there is no way to show it with the json? – GY22 Nov 11 '15 at 08:05
it is if your json contain a valid base64 picture – macrog Nov 11 '15 at 08:08
mmm, ok i will look into it because i dont know if the json is base64 (external json). thanks anyway – GY22 Nov 11 '15 at 08:09
mmm i tried something like this: but i am getting an error -> net::ERR_UNKNOWN_URL_SCHEME – GY22 Nov 11 '15 at 08:13
and make sure that your `{{newsItem.picture}}` it's something more then a string like '58.jpg' – macrog Nov 11 '15 at 08:23

Pytth · Answer 2 · 2015-11-10T22:30:14.400

0

(Perhaps I should have put this in a comment; totally going to get flamed)

I wonder if it could be a z-index issue?

edited Nov 10 '15 at 22:30

answered Nov 10 '15 at 22:22

Pytth

4,008
24
29

Image not showing, although data coming successful back from http request (Ionic)

2 Answers2