【 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图片显示
相关推荐
小*-^-*九17 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
AI视觉网奇19 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems12319 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡1 天前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh1 天前
less和sass
前端·less·sass
Nan_Shu_6141 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel1 天前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登1 天前
【Nest】基本概念
javascript·node.js·express
老华带你飞1 天前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始1 天前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools