vue :src 不显示的解决方案

一定要将静态资源引入 【 require("@/assets/") 】，绑定到 模型绑定的:src 数据中 动态的数据才能有效

 

<template>

  <div>

     <el-card class="box-card">

      <div slot="header" class="clearfix">

        <span>动态列表</span>

        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>

      </div>

      

      <div class="list">

        <el-table

          ref="multipleTable"

          :data="dataPicture"

          tooltip-effect="dark"

          style="width: 100%"

          @selection-change="handleSelectionChange">

          

          <el-table-column

            type="selection"

            width="55">

          </el-table-column>

          <el-table-column

            label="用户"

            width="120">

            <template slot-scope="scope">{{  (scope.row.user).username }}</template>

          </el-table-column>

          <el-table-column

            label="内容"

            width="220">

            <template slot-scope="scope">{{ scope.row.body }}</template>

          </el-table-column>

          <el-table-column

            label="图片"

            width="220">

           

            <template slot-scope="scope">

             <div v-for="(img, index) in scope.row.imgArr" :key="index">

                <img :src="getImgUrl(img.path)" alt="" class="img">

             </div>

            </template>

          </el-table-column>

          <el-table-column

            label="时间"

            width="220">

            <template slot-scope="scope">{{ scope.row.date }}</template>

          </el-table-column>

          <el-table-column

            label="操作"

            show-overflow-tooltip>

            <template slot-scope="scope">

              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>

              <el-button type="text" size="small">编辑</el-button>

            </template>

          </el-table-column>

        </el-table>

      </div>

    </el-card>

 </div>

</template>

<script>

export default {

  data() {

    return {

      dataPicture:[],

    }

  },

  methods: {

    handleClick(row) {

      console.log(row);

    },

    handleSelectionChange(val) {

      // console.log(val);

      this.multipleSelection = val;

    },

    getImgUrl(icon){

      return require("@/assets/"+icon);

    }

  },

  async created() {

    var res = await this.$http.get('/picture')

    this.dataPicture = res.data

    // console.log(typeof this.dataPicture[0].user);

  },

}

</script>

<style scoped>

.img{

  width: 100px;

  height: 100px;

}

</style>