elementui table中的图片的显示 解决方案

有用到这个

https://blog.csdn.net/DianaGreen7/article/details/81169893

如何像图中显示出图片信息

以下是解决方案：

<!--列表-->
<el-table :data="homes" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style=" 100%;">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="id" label="ID" min-width="15%" >
</el-table-column>
<el-table-column prop="message" label="信息" min-width="15%" >
</el-table-column>
<el-table-column prop="link" label="连接" min-width="20%" >
</el-table-column>
<el-table-column prop="image" label="图片" min-width="20%" >
<!-- 图片的显示 -->
<template slot-scope="scope">
<img :src="scope.row.image" min-width="70" height="70" />
</template>
</el-table-column>

<el-table-column label="操作" min-width="10%">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
这是更具体的例子（HTML+SCSS+JS）：
https://jsfiddle.net/stardew/1Lv7qdam/2/

参考资料：
https://segmentfault.com/q/1010000011537328
https://segmentfault.com/q/1010000010357683
————————————————
版权声明：本文为CSDN博主「DianaGreen7」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/DianaGreen7/article/details/81169893