如何在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-avatar size="50px" font-size="29px" :icon="'img:' + props.row.avatar" />

Answer 2

您也可以使用 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

Answer 3

这是来自 docs 的解决方案。

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

所以像这样。

<q-avatar>
  <img :src="props.row.avatar">
</q-avatar>

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

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

quasar-framework