Vue图片显示圆形

列表的图片显示

<el-table-column prop="headUrl" label="用户头像" >
                <!-- 图片的显示 -->
                <template   slot-scope="scope">
                    <div>
                        <img :src="scope.row.headUrl" style="height: 40px;border-radius: 50%"/>
                    </div>
<!--                    <el-image-->
<!--                            style="width: 128px; height: 128px; border-radius: 50%;"-->
<!--                            :src="scope.row.headUrl"-->
<!--                            :fit="fits">-->
<!--                    </el-image>-->
                </template>
            </el-table-column>

详情的图片显示：

<td style="width: 25%">用户头像：
                    <el-image
                        style="width: 128px; height: 128px; border-radius: 50%;"
                        :src="task.headUrl"
                        :fit="fits">
                    </el-image>
                </td>