Question

我使用离子3

图像文件是\ src \ assets \ img

基本页面

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'
  },

]
}

和班级导航

export class NavigationDetailsPage {


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


}

}

在html页面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>

navigationdélesles

<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>

离子服务一切都很好但离子运行 - 设备图标显示但在描述中没有

Answer 1

当您执行ionic run --device时，会创建一个包含www和assets文件夹的新文件夹build，并且您的所有.ts文件都会编译为javascript并存储在那里在名为main.js的单个文件中。您应该添加./（点）以告诉webview图像位于相邻文件夹中：

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

Answer 2

您的图像URL来自组件，现在您可以使用属性绑定，当我们使用img src like-

时，有时它在实际设备上不起作用

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

然后它可以在浏览器中运行，但有时在真实设备中却不起作用，因此这是我们使用属性绑定的另一种方式-

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

它可以在真实设备上运行。

离子应用

2 个答案: