Angular 使用ngIf时未渲染图像

我有一个基本的脚本：

HTML:

我预期会发生什么：

单击按钮显示图像

发生了什么：

单击按钮会在图像应位于的位置显示一个小的灰色矩形，就好像找不到img源一样。离开视图并返回视图确实会使图像出现

我做错了什么，或者如何解决此问题？ 非常感谢您的帮助

更新：

检查完源代码后，我注意到第一次为图像分配了一个类

img unload

。当我离开视图并返回时，类更改为

img-loaded

，使图像出现。我猜这是离子的东西。。。？如何避免这种行为？使用

img

标记而不是

ionimg

可以解决问题，但我更愿意使用

ionimg

标记。

尝试使用img标记

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

您应该使用

，如下所述：

注意：ion img仅用于虚拟卷轴内部

---

这是一个有效的

如果您删除

*ngIf=“test”

，它会显示吗？替换为“assets/imgs/logo.png”。尝试使用

ngClass

来代替它，并添加简单的切换显示：无/块；应该能让它起作用。或者检查devtools中的img src，它可能指向错误的路径，这会导致此行为，还可以检查按钮单击是否实际触发（使用console.log）删除*ngIf=“test”正确显示图像，因此我认为“./assets/”部分是正确的。控制台告诉我按钮被触发了。我将尝试使用ngClass并让您知道。谢谢！不知道ion img只用于虚拟卷轴。

buttonclick()
{
  this.test = true;
}

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