使用ngIf时无法渲染图像

时间:2018-03-15 09:04:10

标签: angular ionic-framework

我有这个基本脚本:

HTML:

<button ion-button (tap)="buttonclick()">Button</button>
<ion-img *ngIf="test" style="width: 20%; vertical-align: middle;" src="../assets/imgs/logo.png"></ion-img>

TS:

buttonclick()
{
  this.test = true;
}

我期望发生的事情:

单击按钮显示图像。

会发生什么:

单击该按钮会在图像所在的位置出现一个小的灰色矩形,就好像无法找到img源一样。离开视图并返回到它确实会使图像出现。

我做错了什么或如何解决这个问题? 非常感谢任何帮助!

更新

在检查源代码后,我注意到第一次为图像分配了一个类img-unloaded。当我离开视图并返回时,课程将更改为img-loaded,使图像显示。我想这是一个离子的东西......?如何避免这种行为?使用img代码而不是ion-img可以解决问题,但我更愿意使用ion-img代码。

2 个答案:

答案 0 :(得分:2)

您应该使用<img>作为doc州:

  

注意:ion-img仅用于虚拟滚动

this有效

答案 1 :(得分:0)

尝试使用img标记。

<img *ngIf="test" style="width: 20%; vertical-align: middle;" src="../assets/imgs/logo.png">