如何在 ionic 5 的 ion-avatar 下显示文本？答案

【问题标题】：How to display text under ion-avatar in ionic 5?如何在 ionic 5 的 ion-avatar 下显示文本？
【发布时间】：2021-06-19 18:28:17
【问题描述】：

在ionic 3应用程序中，我使用下面的代码来显示一组图像和图像下的图像名称。

 <ion-list >
      <ion-item>
        <ion-row>
          <ion-col *ngFor="let item of items">
            <ion-avatar>
              <img [src]="item.profilepic"/>
            </ion-avatar>
            <p>{{item.nameAbbreviation}}</p>
          </ion-col>
        </ion-row>
      </ion-item>
  </ion-list>

我在 ionic 5 中使用相同的代码。但显示显示有一些差异：ion-avatar 图像的尺寸变得更大，图像和文本之间的空间变得更宽。

我做了如下修改，然后图片大小就和ionic 3一样了，但是文字显示在图片的同一行。

  <ion-list >
       <ion-row>
          <ion-col *ngFor="let item of items">
           <ion-item>
            <ion-avatar>
              <img [src]="item.profilepic"/>
            </ion-avatar>
            <p>{{item.nameAbbreviation}}</p>
           <ion-item>
          </ion-col>
        </ion-row>
      </ion-item>
  </ion-list>

你能告诉我在 ionic 5 的 ion-avatar 下显示文本的正确代码是什么吗？

【问题讨论】：

标签： ionic5

【解决方案1】：

希望您在这里找到您的解决方案。请使用以下代码：

<ion-row style="border: 2px solid green">
    <ion-col size="2">
      <ion-avatar>

        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" style="border: 2px solid black;">
        <span style="border: 2px solid red;">TExt Text Text</span>
      </ion-avatar>
    </ion-col>
    <ion-col size="10" style="padding: 3em;"><b>IONAVATAR DEMO Image With Text</b></ion-col>


  </ion-row>

输出：

RedBorder 显示文本，你可以将你的文本内容放在那里......!!!!!!

【讨论】：

你觉得值得吗？