【 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图片显示
相关推荐
hahala233312 分钟前
ESLint 提交前校验技术方案
前端
夕水34 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin36 分钟前
js基础-数据类型
javascript
Winwin37 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了37 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin41 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.1 小时前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js