图像不显示在离子应用程序的设备中

Question

>I 使用 ionic 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 页面中唠叨

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

离子服务一切工作得很好 但 离子运行--装置 图标显示，但在描述中不在

Answer 1

当你执行ionic run --device时，会创建一个新文件夹wwwassets和build文件夹，所有.ts文件都被编译为 javascript 并存储在一个名为main.js的单个文件中。您应该添加./(点(以告诉Web视图图像位于相邻文件夹中：

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

Answer 2

您的图像 URL 来自一个组件，现在您可以使用属性绑定，有时当我们使用 img src 时，它在真实设备上不起作用，例如-

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

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

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

它是在真实设备上工作。