vue表格中动态展示图片

最新推荐文章于 2024-03-31 01:06:54 发布

BeforeEasy

最新推荐文章于 2024-03-31 01:06:54 发布

阅读量807

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/beforeeasy/article/details/128895307

版权

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

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)
      })
    },```