element-plus el-table动态加载本地图片

在Vue中使用Element Plus的el-table组件动态加载本地图片，你需要将图片路径指定为本地资源，并确保Vue项目构建配置能正确处理这些本地资源。

以下是一个简单的例子：

1. 假设你的本地图片存放在项目的public/images目录下。
2. 在你的Vue组件中，定义一个包含图片路径的数据数组。
3. 在el-table-column中使用<img>标签并通过:src绑定动态路径。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="头像" width="180">
      <template #default="scope">
        <img :src="getImageUrl(scope.row.image)" alt="头像" />
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '张三', image: 'images/zhangsan.jpg' },
        // 其他数据...
      ]
    };
  },
  methods: {
    getImageUrl(imageName) {
      return `/${imageName}`;
    }
  }
};
</script>

确保你的Vue项目的vue.config.js文件配置正确，以便Webpack能正确处理这些本地资源。如果你使用Vue CLI创建的项目，默认配置已经包括了对public目录的处理。如果你需要自定义处理，可以这样配置：

// vue.config.js
module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        // 修改options以适应你的需求
        options.limit = 10240;
        return options;
      });
  }
};

这样，当你的表格渲染时，它会动态加载每行数据对应的本地图片。