【 vue + js 】引入图片、base64 编译显示图片

一、引入普通图片

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、拓展说明：

1. 图片以流的形式写到页面显示：图片的字节数组通过base64编译后返回前端。
2. 前端拿到这个data字符串后，先拼接前缀：分别是data:图片类型;编码类型,data字符串数据。
3. 前端显示图片的两种方式：css方式、img标签方式

3、 参考链接：

base64编码显示图片_别逼逼!出马吧!的博客-CSDN博客_base64图片显示