Images and data from json not shown on Android tablet

Ionic Framework ionic-v3
1

[Ionic V2 - Android]
Hello :slight_smile: I’m currently working on my first app, and encountering some problems…

I have a couple of images in my app, which are located both in src/assets/img and www/assets/img and one json file which is located in src/assets/json and www/assets/json (this post here recommended doing that, but it hasn’t solved my problem)

The json file is used to display a list of food names and some numbers associated with them, and the images are used as a background image and in recipes. Now, the background images work, but the recipe images and the food list don’t, and I’m not sure why…

This is how the background images are used in start.scss:

  .start-background-1 {
    background: url("../assets/img/level1.png") fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

This is how the recipe images are used in recipes.ts:

this.recipes = [
      { id: 0, title: 'Chili sin Carne', imageUrl: '../assets/img/0.jpg', 
        category: 'einfach',  co2: 497, recipeIngredients: this.ingredient_CsC, 
        method: 'some text'},
//more recipes
]

This is how the json file is used in start.ts:

this.http.get('../assets/JSON/ingredients_exhibition.json')
    .map(res => res.json())
    .subscribe((data) => {
      this.ingredients = data;
      console.log(this.ingredients);
      window.localStorage.setItem("ingredient_list", JSON.stringify(this.ingredients));
    });

If you need any other info, please ask, since I’m not sure where the problem lies exactly I’m not sure what information is useful…

2

Don’t work meaning, don’t show up on the page ? If yes, can you share the output of the console.log and the html snippet.

3

The only thing in the html for the recipes is this:

  <img src="{{recipe.imageUrl}}"/>

How do I get the console log when I’m running the app on the tablet? :astonished:

sorry, here’s the html for the data list:

<ion-content>
  <ion-searchbar (input)="search($event)"></ion-searchbar>
   <ion-item-group *ngFor = "let itemgroup of groupedItems">
   <ion-item-divider color="light">{{ itemgroup.type }}</ion-item-divider>
   <ion-item (click)="itemClicked(item)" *ngFor="let item of itemgroup.items">
     {{ item.title }}
       <ion-badge item-right color="infoBadge">{{item.co2value}}g CO<sub>2</sub>/kg</ion-badge>
   </ion-item>
 </ion-item-group>
</ion-content>
4

So does the code work on the browser (on your laptop) ?

Can you take a screenshot of your page…and maybe dump the json on the page somewhere
<p>{{ this.ingredients | json }}</p>

5

It looks like this on the tablet

image
Screenshot_2017-07-09-21-21-33.png800×1280 57 KB

7

Yes, it works fine in the browser, this is what it looks like. On the tablet, the product list just shows the categories (the grey text bits) and not the products.

Also, not sure if you saw, but I added the html code for the product list in the earlier reply!

image

btw I would be replying faster but the forum is making me wait >.<

8

Set
imageUrl: 'assets/img/0.jpg'
(it works for me)

9

imageUrl: ‘assets/img/0.jpg’

nope this hasn’t changed anything on the tablet, or the browser…

do you think that maybe the tablet uses the images placed in the www folder and not in the src folder? and then it would be a different path?

this is the path in the platform android folder
\EvE\platforms\android\assets\www\assets\img

10

ok I tried this:

    this.http.get('/assets/www/assets/JSON/ingredients_exhibition.json')

and this

imageUrl: '/assets/www/assets/img/0.jpg'

but it hasn’t fixed it, so either the path is wrong, or that’s not the cause…

11

I solved it!! found this old post here, and then tried this path, and it worked!!

this.http.get('file:///android_asset/www/assets/JSON/ingredients_exhibition.json')

this also worked for my images!

imageUrl: 'file:///android_asset/www/assets/img/0.jpg'

(I still have no idea why part of my images work with this path: “…/assets/img/level4.png” and some with the other path… but :innocent: