quasar-framework - 如何从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

您也可以使用 q-btn .

<q-btn round>
  <q-avatar size="42px">
    <img src="https://cdn.quasar.dev/img/avatar2.jpg">
  </q-avatar>
</q-btn>

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