how to make a round avatar from a square image in Quasar

Question

I am trying to create a round avatar in Quasar Framework

For this I use q-btn and q-vatar but the images of Gravatar are square which causes me to show a white background around the square image

<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

You can also use q-btn.

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

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