vue表格中动态展示图片

Vue.js中解决el-table动态绑定图片路径问题

最新推荐文章于 2024-07-14 15:29:00 发布

原创最新推荐文章于 2024-07-14 15:29:00 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在Vue.js项目中，使用el-table组件动态绑定图片路径时遇到问题，直接使用:src绑定数据源会显示不出来。解决方法是通过require处理图片路径，但在模板直接使用require会报错。最终解决方案是在获取表格数据后，遍历处理每个数据项，将图片名称转化为require格式的完整路径。

踩了很多坑始终不显示，在此记录下
效果：
在这里插入图片描述

html

:src动态绑定路径

<el-table
        :data="tableData2"
        style="width: 100%"
        height="550"
    >
      <el-table-column label="图片" prop="img" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" width="40" height="80" class="head_pic" referrerpolicy="no-referrer"/>

        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" plain size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column
          fixed
          prop="id"
          label="id"
          width="0"
          v-if=false
      />
    </el-table>

js

必须要用require包含起来才行
但是直接再:src中写require一直报错，最终是动态获取表格数据后，循环手动处理成require想要的格式

 getData(n1,n2){
      console.log("here in get data")
      console.log("n1=",n1,"n2=",n2)
      this.axios.post("/get_all_bgs",{
        // 每页显示的条数
        pageSize:n1,
        // 显示第几页
        page:n2,
      },{emulateJSON: true},).then(
          res => {
            console.log(res.data.status)
            var status = res.data.status
            if (status == 0) {
              this.tableData2 = res.data.bgs_all
              // 这里将mysql中存储的图片名字转为require包含的路径
              for (var i = 0; i < res.data.bgs_all.length; i++ ) {
                this.tableData2[i].img =  require('@/assets/bg_imges/' +res.data.bgs_all[i].p_name)
                console.log( this.tableData2[i].img)
              }
              }
          }
      ).catch(res => {
        console.log(res.data.status)
        console.log(res.data.msg)
      })
    },```