Question

我认为我面临一个奇怪的问题。我正在尝试在ion-img组件内使用ion-card显示图像：

<ion-card>
    <ion-img src="https://www.mywebsite.com/images/stories/koloheandino24.jpg" ></ion-img>
</ion-card>

但这不起作用！

与ion-img之前的任何HTML标记完全相同的代码，可以正常工作！！！

<ion-card>
    <span>bla bla ...</span>
    <ion-img src="https://www.mywebsite.com/images/stories/koloheandino24.jpg" ></ion-img>
</ion-card>

Answer 1

这项工作。再次检查您的图片链接。

<ion-card>
    <ion-img src="https://images.unsplash.com/photo-1564446586861-7469f94e9c98?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" ></ion-img>
</ion-card>

Answer 2

解决方案：将min-height: 1px添加到ion-img

github中有一个未解决的问题，作者在this comment中找到了这种解决方案。

我引用作者：

将其放在此处，以便可能遇到此问题的其他人。在ion-img元素上设置最小高度似乎可以解决此问题：

在您的global.scss（或其他相关样式表）中：

:root {
  ion-img {
    /** 
     * Bug fix for:
     * https://github.com/ionic-team/ionic/issues/18734
     */
    min-height: 1px !important;
  }
}

ion-img在离子卡内不起作用-Ionic 4

2 个答案: