【 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图片显示