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

Posted 2023-03-05

【中文标题】离子应用程序的设备中不显示图像

【英文标题】：Image doesn’t display in device for ionic app

【发布时间】：2017-12-22 00:34:43

【问题描述】：

我使用离子 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>

导航细节

<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 一切正常 但 离子运行--设备 图标显示，但描述中没有

【参考方案1】：

当您执行ionic run --device 时，将使用assets 和build 文件夹创建一个新文件夹www，并且您的所有.ts 文件都被编译为javascript 并存储在一个名为main.js 的文件中。您应该添加 ./(dot) 以告诉 webview 图片在相邻文件夹中：

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

【讨论】：

是的，我试试 ./assets ;././assets; ../assets no 1 of this workig

如果您通过访问chrome://devices/ 调试您的应用程序，您可以看到它抛出的 404 错误，您可以把错误粘贴在这里吗？

对不起，我构建 apk 比安装它没有错误，但图像不显示

见鬼，我一直在寻找这个问题的答案。事实证明，无论是在应用程序上还是在模拟器上，您都需要在图像位置停留 1 个句点才能显示图像。非常感谢！说真的。

“句号”——“.”的另一种说法，今天学到了两个新东西！

【参考方案2】：

你的图片URL来自一个组件，现在可以使用属性绑定了，有时在我们使用img src之类的时候它在真机上不起作用-

    <img src="item.icon">  

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

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

它是在真实设备上工作的。