el-table-column 中的 el-image 无法正常显示图片

1 问题描述

在 el-table-column 中通过 el-image 显示图片时，el-image 不能加载图片，但将 src 换为静态属性且赋值一个图片 URL 后发现可以正常显示图片。

<el-table-column prop="avatar" label="头像" align="center" >
	<el-image :src="avatar" fit="contain" class="avatar-container">
    	<template #error>
        	<div class="image-slot">
            	<el-icon><Picture /></el-icon>
            </div>
        </el-image>
    </template>
</el-table-column>

2 引发原因

:src="avatar" 不能读取 avatar 中存入的图片 URL。即 el-image 中的属性不能直接获取 el-table-column 的 prop 中绑定的值。

3 解决方法

通过 <template #default="scope"></template> 添加一个插槽获取当前行的数据，然后赋值给 el-iamge 的 src 属性。（:src="scope.row.avatar"）

<el-table-column prop="avatar" label="头像" align="center" >
      <template #default="scope">
        <el-image :src="scope.row.avatar" fit="contain" class="avatar-container">
          <template #error>
            <div class="image-slot">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
      </template>
    </el-table-column>