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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/77635.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM 之 String 引用机制解析:常量池、堆内存与 intern 方法

关于常量池中的String类型的数据&#xff0c;在JDK6中只可能是对象&#xff0c;在JDK7中既可以是对象也可以是引用 案例一&#xff1a; String s1 new String("1"); String s2 "1"; System.out.println(s1 s2);s1: 执行 new String("1")&am…

数据库管理-第313期 分布式挑战单机,OceanBase单机版试玩(20250411)

数据库管理313期 2025-04-11 数据库管理-第313期 分布式挑战单机&#xff0c;OceanBase单机版试玩&#xff08;20250411&#xff09;1 环境说明2 操作系统配置2.1 关闭防火墙2.2 关闭SELinux2.3 配置hosts文件2.4 配置本地yum源2.5 配置sysctl.conf2.6 配置limits.conf2.7 创建…

AI 之 LLM(大语言模型)是如何生成文本的!

你是不是也曾在朋友面前自信满满地说&#xff1a;“AI我可太熟了&#xff01;”然后随便丢一句“写篇短文”给大模型&#xff0c;坐等它秒出结果&#xff1f;但你有没有想过&#xff0c;那几秒钟里&#xff0c;AI到底干了什么&#xff1f;从你敲下的几个字&#xff0c;到屏幕上…

STL之序列式容器(Vector/Deque/List)

序列式容器 序列式容器包括&#xff1a;静态数组 array 、动态数组 vector 、双端队列 deque 、单链表 forward_ list 、双链表 list 。这五个容器中&#xff0c;我们需要讲解三个 vector 、 deque 、 list 的使 用&#xff0c;包括&#xff1a;初始化、遍历、尾部插入与删除、…

swift菜鸟教程6-10(运算符,条件,循环,字符串,字符)

一个朴实无华的目录 今日学习内容&#xff1a;1.Swift 运算符算术运算符比较运算符逻辑运算符位运算符赋值运算区间运算符其他运算符 2.Swift 条件语句3.Swift 循环4.Swift 字符串字符串属性 isEmpty字符串常量let 变量var字符串中插入值字符串连接字符串长度 String.count使用…

泛微ECOLOGY9 记 数据展现集成 自定义开窗测试中对SQL 的IN语法转换存在BUG

背景 搭建流程时&#xff0c;需将明细表1中的合同字段 供明细表2中的合同开窗查询使用。 最终实现如下图&#xff1a; 选择 发票号时&#xff0c;自动带出明细表1中的采购合同号清单&#xff0c;然后在明细表2中开窗采购合同号时&#xff0c;只跳出明细表1中有的采购合同号&am…

(自用)蓝桥杯准备(需要写的基础)

要写的文件 led_app lcd_app key_app adc_app usart_app scheduler LHF_SYS一、外设引脚配置 1. 按键引脚 按键引脚配置如下&#xff1a; B1&#xff1a;PB0B2&#xff1a;PB1B3&#xff1a;PB2B4&#xff1a;PA0 2. LCD引脚 LCD引脚配置如下&#xff1a; GPIO_Pin_9 /* …

PM2 完全指南:Node.js 应用后台启动、关闭与重启详解

文章目录 **PM2 完全指南&#xff1a;Node.js 应用后台启动、关闭与重启详解****1. 什么是 PM2&#xff1f;****2. 安装 PM2****全局安装****验证安装** **3. 使用 PM2 启动 Node.js 应用****基本启动****指定应用名称****集群模式&#xff08;多进程负载均衡&#xff09;****监…

Linux环境变量详解

引言 在Linux系统中&#xff0c;环境变量是一种非常重要的概念&#xff0c;它影响着系统的运行方式和应用程序的行为。无论你是Linux新手还是经验丰富的管理员&#xff0c;深入理解环境变量都能帮助你更高效地使用和管理Linux系统。本文将从基础概念到高级应用&#xff0c;全面…

408 计算机网络 知识点记忆(8)

前言 本文基于王道考研课程与湖科大计算机网络课程教学内容&#xff0c;系统梳理核心知识记忆点和框架&#xff0c;既为个人复习沉淀思考&#xff0c;亦希望能与同行者互助共进。&#xff08;PS&#xff1a;后续将持续迭代优化细节&#xff09; 往期内容 408 计算机网络 知识…

@linux系统SSL证书转换(Openssl转换PFX)

在Linux中&#xff0c;你可以使用OpenSSL工具将PFX/P12格式的证书转换为单独的CRT&#xff08;证书&#xff09;、KEY&#xff08;私钥&#xff09;文件以及提取证书链 1. 提取私钥文件(.key) openssl pkcs12 -in your_certificate.pfx -nocerts -out private.key -nodes系统会…

DAOS系统架构-组件

如上图所示&#xff0c;一个完整的DAOS系统是由管理节点组件、客户端节点组件、服务端节点组件以及网络通信组件四个部分组成。管理节点组件通过管理网络通道&#xff08;蓝色&#xff09;对DAOS服务管理和监控。客户端节点组件通过数据网络通道&#xff08;红色&#xff09;与…

制作一款打飞机游戏教程2:背景滚动

滚动原型开发 接下来&#xff0c;我们开始聚焦滚动原型的开发。我们需要确定游戏关卡的长度以及背景滚动的速度。 地图与精灵空间限制 在开发过程中&#xff0c;我们遇到了地图与精灵空间限制的问题。PICO 8的地图编辑器下半部分与精灵表共享空间&#xff0c;这意味着我们只…

计算机组成原理——CPU与存储器连接例题

计算机组成原理——CPU与存储器连接例题 设CPU共有16根地址线和8根数据线&#xff0c;并用(MREQ) ̅作为访存控制信号&#xff08;低电平有效&#xff09;&#xff0c;(WR) ̅作为读/写命令信号&#xff08;高电平读&#xff0c;低电平写&#xff09;。现有下列存储芯片&#…

GNSS静态数据处理

1 安装数据处理软件&#xff1a;仪器之星&#xff08;InStar &#xff09;和 Trimble Business Center 做完控制点静态后&#xff0c;我们需要下载GNSS数据&#xff0c;对静态数据进行处理。在处理之前需要将相关软件在自己电脑上安装好&#xff1a; 仪器之星&#xff08;InS…

Process Explorer 性能调优实战:精准定位资源泄漏与高负载进程

一、下载与安装 ‌下载地址‌ Process Explorer安装包下载&#xff1a;https://pan.quark.cn/s/950c36ba5364下载后解压压缩包&#xff0c;运行 procexp.exe&#xff08;32 位系统&#xff09;或 procexp64.exe&#xff08;64 位系统&#xff09;‌。 ‌界面概览‌ 主界面以树…

SVMSPro分布式综合安防管理平台-->以S3存储革新,开启智能安防新纪元

SVMSPro分布式综合安防管理平台–>以S3存储革新&#xff0c;开启智能安防新纪元 在数字化转型浪潮下&#xff0c;企业安防管理正面临海量数据存储、跨区域协同以及数据安全的严峻挑战。如何实现高效、弹性、低成本的存储扩容&#xff1f;如何确保关键录像数据万无一失&…

Python 装饰器(Decorator)

文章目录 代码解析1. 装饰器定义 timer(func)2. 应用装饰器 timer **执行流程****关键点****实际应用场景****改进版本&#xff08;带 functools.wraps&#xff09;** 这是一个 Python 装饰器&#xff08;Decorator&#xff09; 的示例&#xff0c;用于测量函数的执行时间。下…

git commit时自动生成Change-ID

创建全局钩子目录&#xff1a; 创建一个全局的Git hooks目录&#xff1a; mkdir -p ~/.githooks 下载并设置commit-msg钩子脚本&#xff1a; 下载Gerrit的commit-msg钩子脚本&#xff0c;并放置在全局钩子目录中(如下载不了&#xff0c;可从本页面附件中下载&#xff0c;“…

最新Ktransformers v0.24(Docker)并发部署DeepSeek-V3-0324模型

一、介绍 KTransformers v0.2.4 发布说明 我们非常高兴地宣布&#xff0c;期待已久的 KTransformers v0.2.4 现已正式发布&#xff01;在这个版本中&#xff0c;我们对整 体架构进行了重大重构&#xff0c;更新了超过 1 万行代码&#xff0c;为社区带来了备受期待的多并发支…