vue :src 不显示的解决方案

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

<div>

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

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

</div>

<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">

</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>

<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>

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>

.img{

width: 100px;

height: 100px;

}

</style>

巴特西

vue :src 不显示的解决方案

最新文章

热门文章