Vue显示图片的几种方式

心已赠人 2023-09-24 16:38 66阅读 0赞

## 前言 ##

最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。

头像这一栏空荡荡的，我这种强迫症患者难受死！

![在这里插入图片描述][65d02f15914543b0a4fd15ba72c46ade.png]

首先声明下，我的数据列表是查询数据库接口返回的，那么我头像路径也是保存在数据库的：

我先去网上随便搜了点图片入库里面，先让他能正常展示着，后面有空了再改为通过接口动态上传展示。

![在这里插入图片描述][8eb6322a62bb4a87aa70f0e04a919537.png]

## 使用原生img标签 ##

我们可以直接使用img标签去实现。通过它的src属性指定文件路径：

![在这里插入图片描述][0cc3d1325d024f88ac237e390415867a.png]

额。。。原生展示的图片好像有点太大了，我们简单给点样式吧：

![在这里插入图片描述][4319e970163b4e0a9e8acacfcf713982.png]

这样是不是好多了！

![在这里插入图片描述][7739de39360c4208bdc051bb8c072d71.png]

相关代码：

!-- 
             shape 图片显示方式 circle为原型像 square为方形
             size 图片的大小
             src 图片的路径
            -->
          <el-table-column prop="image" label="头像" width="90"  align="center">
             <template slot-scope="scope">
                 <el-avatar  shape="circle" :size="50" :src="scope.row.image"></el-avatar>
    　　    </template>
          </el-table-column>

## 参数说明 ##

关于它的参数，我只说一些简单的和必要的，其他参数详见官网

size 设置头像的大小  
shape 设置头像的形状  
src 图片头像的资源地址  
fit 当展示类型为图片的时候，设置图片如何适应容器框

## 总结 ##

其实还是很简单的，只需要搞清楚图片的url即可 。

[65d02f15914543b0a4fd15ba72c46ade.png]: https://img-blog.csdnimg.cn/65d02f15914543b0a4fd15ba72c46ade.png
[8eb6322a62bb4a87aa70f0e04a919537.png]: https://img-blog.csdnimg.cn/8eb6322a62bb4a87aa70f0e04a919537.png
[0cc3d1325d024f88ac237e390415867a.png]: https://img-blog.csdnimg.cn/0cc3d1325d024f88ac237e390415867a.png
[4319e970163b4e0a9e8acacfcf713982.png]: https://img-blog.csdnimg.cn/4319e970163b4e0a9e8acacfcf713982.png
[7739de39360c4208bdc051bb8c072d71.png]: https://img-blog.csdnimg.cn/7739de39360c4208bdc051bb8c072d71.png
[ElementUI-Avatar]: https://element.eleme.cn/#/zh-CN/component/avatar
[e2c9a3564ae04acdafe33d82d70436b8.png]: https://img-blog.csdnimg.cn/e2c9a3564ae04acdafe33d82d70436b8.png
[e71cc48983a345ef84f032bb8f6048c7.png]: https://img-blog.csdnimg.cn/e71cc48983a345ef84f032bb8f6048c7.png
[1a2fc62f147f4009989c07099354af3b.png]: https://img-blog.csdnimg.cn/1a2fc62f147f4009989c07099354af3b.png
[929df901e0574954a4f86d32f67a0444.png]: https://img-blog.csdnimg.cn/929df901e0574954a4f86d32f67a0444.png
[eebe881150db41a2aa3b5b39b7b17302.png]: https://img-blog.csdnimg.cn/eebe881150db41a2aa3b5b39b7b17302.png
[2db2863a32a2448d89f5656713289cae.png]: https://img-blog.csdnimg.cn/2db2863a32a2448d89f5656713289cae.png