一、引入普通图片
1、代码示例:
<div class="question"><!-- 错误写法 --><el-empty image="../assets/noinformation.svg" description="暂无问卷"><el-button type="primary">按钮</el-button></el-empty><!-- 正确写法 一定要注意image属性是有:的,不然图片无法显示--><el-empty :image="require('../assets/noinformation.svg')" description="暂无问卷"><el-button type="primary">按钮</el-button></el-empty>
</div>
2、参考链接:
el-empty Empty 空状态 自定义图片 使用本地图片_el-empty 自定义图片-CSDN博客
二、base64 编译显示图片
1、代码示例:
拼接前缀, 分别是 data:图片类型 、 编码类型、 data字符串数据
2、拓展说明:
- 图片以流的形式写到页面显示:图片的字节数组通过base64编译后返回前端。
- 前端拿到这个data字符串后,先拼接前缀:分别是
data:图片类型;编码类型,data字符串数据。
- 前端显示图片的两种方式:css方式、img标签方式