как сделать круглый аватар из квадратного изображения в квазаре

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 -контент

Answer 2

Решение:

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