vue图片显示圆形

列表的图片显示：<el-table-column prop="headUrl" label="用户头像" ><templateslot-scope="scope"><div><img :src="scope.row.headUrl" style="height

爱吃血肠

15520人浏览 · 2020-06-19 17:00:24

爱吃血肠 · 2020-06-19 17:00:24 发布

列表的图片显示：
在这里插入图片描述

<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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^