问题复现:
源代码段:
<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="头像" width="85px">
<template #default="scope">
<el-image
style="width: 60px;height: 60px;"
:src="scope.row.avatar"
:preview-src-list="[scope.row.avatar]"
hide-on-click-modal="true">
<template #error>
<div class="image-slot">
<el-icon><user /></el-icon>
</div>
</template>
</el-image>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="130"/>
解决:
官网文档有这么一个属性,官网是这个描述的(Image 属性)
于是尝试了在<el-image>中加入属性
preview-teleported="true"
修改后代码段
<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="头像" width="85px">
<template #default="scope">
<el-image
style="width: 60px;height: 60px;"
:src="scope.row.avatar"
:preview-src-list="[scope.row.avatar]"
hide-on-click-modal="true"
preview-teleported="true">
<template #error>
<div class="image-slot">
<el-icon><user /></el-icon>
</div>
</template>
</el-image>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="130"/>
最后解决