在element plus的＜el-table＞中显示本地图片

直接代码走起，一目了然

<template>

  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >

      <el-table :data="tableData" stripe style="width: 100%" :fit="true">
        <el-table-column label="封面" width="120" prop="cover">
          <template #default="scope">
            <div style="width: 110px;height: 110px;display: flex;align-items: center;">
              <el-image fit="fill" :src="require(`../../assets/image/${scope.row.cover}`)"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="200"/>
        <el-table-column prop="address" label="地址"/>
        <el-table-column prop="date" label="日期" width="100" />
        <el-table-column label="Action">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    </a-layout-content>
  </a-layout>

</template>
<script>


const tableData = [
  {
    cover:'js.jpg',
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    cover:'java.jpg',
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    cover:'vue.jpg',
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    cover:'js.jpg',
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];

export default {
  data(){
    return {tableData};
  },
  methods:{
    handleEdit( index, row) {
      console.log(index, row);
    },
    handleDelete (index, row){
      console.log(index, row)
    }
  }
};
</script>

 最核心的两个点：

1 src属性中，require里面的内容必须拼接，使用了ES6的快捷拼接`${ }`语法

2 scope.row和scope.$index