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

一、引入普通图片

1、代码示例:

javascript 复制代码
<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图片显示
相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发4 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码5 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记5 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏5 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端