CODEWITHSUNDEEP
javascripthtmlangularionic2ionic3
Lina Sera
Lina Sera

Reputation: 21

Image doesn’t display in device for ionic app

I using ionic 3

images file is \src\assets\img

basic page 

export class BasicPage { 

items = [];

constructor(public nav: NavController ,private admob: AdMob) {
this.items = [

  {
    'title': ' Managing Coins & Gems ',
    'icon': 'assets/img/icone2.png',
    'description': ' a way to farm gems ifem pack.<br><br>  <img src="assets/img/pic3.jpg"> <br><br> Shadow Fight ments are about 15 seconds long for 1 Gem. <br><br>  <img src="./assets/img/pic4.jpg"> <br><br> There’s also a rewards by completing in game achievements. This usually gives a player about 1 Gem per achievement, but as you go through the game, the rewards ramp up proportionally. You havecon).<br><br>  <img src="assets/img/pic5.jpg"> <br><br>',
    'color': '#FFD439'
  },
  {
    'title': ' Gear Sets, Skill Trees & Moves ',
    'icon': 'assets/img/icone3.png',
    'description': ' Unless <br> Skill trees in the  bump. <br><br> <img src="assets/img/pic7.jpg"> <br><br>Make   ',
    'color': '#CE6296'
  },

]
}

and class navigation 

export class NavigationDetailsPage {


item;
 constructor(params: NavParams) {
this.item = params.data.item;


}

}

in the html page nagivation 

<ion-header>
  <ion-navbar>
    <ion-title>Shadow Fight 2 guide</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
 
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)" icon-start>
   <ion-avatar item-start>
            <img src= {{item.icon}}>
      </ion-avatar>
      {{ item.title }}
    </button>
  </ion-list>
</ion-content>

navigation détailles 

<ion-header>
  <ion-navbar>
    <ion-title>
      {{ item.title }}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-icon [name]="'logo-' + item.icon" [ngStyle]="{'color': item.color}"></ion-icon>
 <div [innerHTML]="item.description">
</div>

 
 
</ion-content>

ionic serve all is working nice but ionic run --device icon display but outher in the description not

Upvotes: 2

Views: 900

Answers (2)

Md Alamin
Md Alamin

Reputation: 1462

Your image URL comes from a component, now you can use property binding, sometimes it does not work on the real device when we use img src like-

    <img src="{{item.icon}}">

then it works in the browser but in the real device sometimes it does not work, so here is another way we use property binding-

    <img [src]="item.icon">

it is work on the real device.

Upvotes: 0

Dhyey
Dhyey

Reputation: 4335

When you execute ionic run --device a new folder www is created with assets and build folder and all your .ts files are compiled to javascript and stored there in a single file named main.js. You should add ./(dot) to tell the webview that images are in adjacent folder :

'icon': './assets/img/icone2.png',

Upvotes: 3

Related Questions