如何在Ionic 4中为Ion-img添加边界半径

Question

我需要将border-radius添加到ion-img，但似乎shadow DOM不允许我修改。

HTML

<ion-img [src]="img-url" [alt]="alt"></ion-img>

CSS

ion-img  {
    border-radius: 10px !important;
}

Answer 1

HTML

<ion-img [src]="img-url" class="your-img"></ion-img>

CSS

.your-img {
    border-radius: 10px !important;
    overflow: hidden;
}

Answer 2

正确的、非显而易见的方法是使用 CSS shadow parts。

在这种情况下 ion-img has a shadow part image 所以我们的 SCSS 看起来像：

ion-img::part(image) {
  border-radius: 10px;
}

是的，该部分没有引号，是完整的单词“image”（不是“img”，我们需要部分名称，而不是目标标签名称）。

Answer 3

1. 将图像放入卡中

    <ion-card>
        <ion-img  src="imag"></ion-img>                      
    </ion-card> 

1. 之后设置图像的样式

2. 以ion-img样式将图片的高度和高度设置为100％

3. 修改离子卡组件中的半径值

Answer 4

您可以使用：

<ion-avatar>
   <ion-img [src]="item.image"></ion-img>
</ion-avatar>`

ion-avatar {
    --border-radius: 10px;
}

我在

Answer 5

encapsulate style with Shadow DOM有点棘手，但是有很多方法。

在这种情况下，它是否具有内联样式属性对您有用？

<ion-img [src]="img-url" [alt]="alt" [style]="border-radius: 10px;"></ion-img>

否则，您可以尝试将<style></style>标签添加到具有边框半径的Shadow DOM的内部HTML中。

附件链接中的修改示例：

const host = document.getElementById('shadow-host');

host.shadowRoot.innerHTML = `
<style>
  img {
    border-radius: 10px;
  }
</style>
`

Answer 6

您可以在 <ion-img> 中使用 <ion-thumbnail> 并且样式效果很好。 HTML：

 <ion-thumbnail slot="start">
      <ion-img src='/assets/avatar-images/defaultuser.png'"></ion-img>
    </ion-thumbnail>

CSS：

ion-thumbnail {
          --border-radius: 10px;
          border: 1px solid var(--grayColor);
          
        }