如何从Quasar中的方形图像制作圆形头像

Question

我正在尝试在Quasar Framework中创建一个圆形头像

为此，我使用q-btn和q-vatar，但是Gravatar的图像是方形的，这导致我在方形图像周围显示白色背景

<template v-slot:body="props">
  <q-tr
    @click="setUser(props.row)"
    :props="props"
    :style="!props.row.active ? 'background: #f48fb1' : ''"
    class="cursor-pointer"
  >
    <q-td key="avatar" :props="props">
      <q-btn round dense>
        <q-avatar :icon="'img:' + props.row.avatar" />
      </q-btn>
    </q-td>
    <q-td key="email" :props="props">{{ props.row.email }}</q-td>
    <q-td key="name" :props="props">{{ props.row.name }}</q-td>
    <q-td key="active" :props="props">{{ $t(String(!!props.row.active)) }}</q-td>
  </q-tr>
</template>

Answer 1

您也可以使用initial。

q-btn

链接-https://quasar.dev/vue-components/button#Custom-content

Answer 2

解决方案：

<q-avatar size="50px" font-size="29px" :icon="'img:' + props.row.avatar" />

Answer 3

这是来自 docs 的解决方案。

table thead th {
  vertical-align: center;
  height: 20px;
  background-color: white;
  border-left: 1px solid black !important;
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
  position: sticky; /* fixed head */
  top: 0;
}

就像这样。

<q-avatar>
  <img src="https://cdn.quasar.dev/img/avatar.png">
</q-avatar>