【发布时间】：2025-12-19 17:15:07
【问题描述】：
我有这个基本脚本：
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 标记。
【问题讨论】：
-
如果您删除
*ngIf="test"，它会显示吗？ -
替换为“assets/imgs/logo.png”。
-
尝试使用
ngClass而不是这个并添加简单的切换显示：无/块；应该让它工作。或者查看devtools中的img src，它可能指向错误的路径，导致这种行为 -
并检查是否实际触发了buttonclick（使用console.log）
-
Removing *ngIf="test" 正确显示了图像，所以我认为“../assets/”部分是正确的。控制台告诉我按钮已触发。我会尝试使用 ngClass 并告诉你。