Image from json file

Ionic Framework ionic-v3
1

Hello,
i am trying to load an image from a json file.the whole Image is an array full of Image versions.since i am doing this inside an ion-item i went for the thumbnail.added as a class.but i only get a white square
here’s my code

` $scope.articles=[];

article.getArticles().then(function(response){
$scope.articles = response.data;
console.log($scope.articles);
}).catch(function(response){
//request was not successful
//handle the error
})`

`<ion-item ng-repeat="article in articles.news" class="item item-thumbnail-right" ng-href="#/Articles/{{article.Article.id}}">

`

here s the json file
https://www.yabiladi.com/newsapi/view/52178.json
thabk you for any help

2

You need an <img>-tag inside of your <ion-item> in order for the thumbnail to show.

Something like this: <img ng-src="{{article.imageUrl}}"> should do the trick.

http://ionicframework.com/docs/components/#item-thumbnails

3

actually i had it there.just didn’t copy it
since it’s buried deep in the file i don’t if i am reaching it correctly
here a pen.it includes the controller using a service.info is appearing.images isn’t

See the Pen BWGqVo by mohamed reda (@redamed) on CodePen.

thank for the help mate
4

Syntax looks correct, so perhaps the problem is with the path of the image. The attribute thumb is pointing towards 191c975eec632ad8d1a27e7b3e3b6efe200.jpg.

Are you sure that the image exists at that path? Check the Network Tab in your Developer Console and make sure the image request is fired and that it does not result in a 404.

5

i get no errors
only errors related to font awesome.but the icon is there.

image
Capture1.PNG747×261 25.6 KB

as for the network area after a reload.the only requests there are related to font awesome.which logically means that the image request isn’t fired?
image
Capturei.PNG748×246 16.8 KB

i checked in the img area too.only the logo is loading

6

Strange. If you write the URL out inside a <p>-tag, do you see the full path?

Something like <p>{{article.Image.thumb}}</p>

1 Like
7

nothing.i tried inside the ion-item and outside of the list.nothing mate

8

I think I see it now. The attribute Image is actually not an object, it is an array containing one object.
So in order to see your image you are going to have to use {{article.Image[0].thumb}}.

See if that works for you buddy :slight_smile:

1 Like
9

now it’s almost working.without the i got the names.then added the tag.i get a 404 not found

image
Capture2.PNG749×510 71.7 KB

just to be sure this is correct
<ion-list> <ion-item> <img ng-src="{{article.Image[0].thumb}}"> </ion-item> </ion-list>

10

Do not forget to add class="item-thumbnail-right" if you want it as a thumbnail.

Now you just need to figure out which path the images are at relative to your index.html and you should be good to go.

11

i didn’t understand the 2nd part.you mean like including it in the index like i did for the fonts?

12

Take a screenshot of your folder where index.html is and a screenshot of where the image folder is and post both screenshots here please.

13

index html is in the www folder as usual and the images are in a json file actually

14

Images can not be in a JSON-file unless you have converted them to a textual representation.

15

i didn’t convert anything.the thing is i got the json file from this dude in the place i am doing a training at.i’ve been trying to get the images.the link i posted here is an example.

16

The image URL you are getting from the JSON file is assuming that the images exist at the same location that your index.html file is at.

If you are missing the images, there is no way to make them show up. You need to have the images in place.

17

ok.i get it now.thanks for the help mate.really appreciated :slight_smile:

1 Like