解决prop接受的图片地址,怎么赋给src的问题
- 数组
1.数据里加一个空数组,picurl: []
2.后台传过来的图片地址都赋给picurl
this.picurl=this.tableData.map(item=>{return item.thumbnail})
3.
<el-table-column label="图片" width="200px" align="center">
<template slot-scope="scop">
<el-image class="pic" prop="thumbnail" :src="picurl[scop.$index]" style="width: 100px; height: 100px">
</el-image>
</template>
</el-table-column>
- 函数
1.方法里加一个getImg,返回当前项的图片地址
2.
<el-table-column label="图片" width="200px" align="center">
<template slot-scope="scop">
<el-image class="pic" prop="thumbnail" :src="getImg(scop.$index)" style="width: 100px; height: 100px">
</el-image>
</template>
</el-table-column>
- 如下,注意prop的值是什么,src的值就是什么
<el-table-column label="图片" prop="pthumbnail" width="200px" align="center">
<template slot-scope="scop">
<el-image class="pic" :src="scop.row.pthumbnail" style="width: 100px; height: 100px">
</el-image>
</template>
</el-table-column>
方法1、2差不多,能加载图片但是是根据表格项地址来加载的,我弄了一个搜索,发现图片不刷新。。搜索数据的第一项的图片永远是所有数据的第一项。换成方法3就没问题了
综上,方法3最好