base64格式图片展示

2023-11-10

   后端发图片,为base64格式的,前端接收后页面展示图片。处理方法:

  let imageData = 'data:image/png;base64,' + res.data.image(后端传来数据)

  //如果base64位图片没有带前面得头:'data:image/png;base64,',需要添加,才可以

   原文链接:https://blog.csdn.net/sky_LQ/article/details/87976598

不同类型base64数据的展示:

在这里要说到Data URI scheme,它可以直接将一些小的数据直接嵌入到网页中,不需要再引入。支持格式如下:

  data:, 文本数据

  data:text/plain, 文本数据

  data:text/html, HTML代码

  data:text/html;base64, base64编码的HTML代码

  data:text/css, CSS代码

  data:text/css;base64, base64编码的CSS代码

  data:text/javascript, Javascript代码

  data:text/javascript;base64, base64编码的Javascript代码

  data:image/gif;base64, base64编码的gif图片数据

  data:image/png;base64, base64编码的png图片数据

  data:image/jpeg;base64, base64编码的jpeg图片数据

  data:image/x-icon;base64, base64编码的icon图片数据

  所以此时只要是将base64格式的图片赋值给图片的src 属性即可。

           <img src= "data:image/png;base64,图片的base64" />

  如果想展示为jpg格式,前面变为data:image/jpeg;base64, 即可。

原文链接:https://blog.csdn.net/happyzhlb/article/details/129245407

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

base64格式图片展示 的相关文章

  • Unity Editor绘制时分辨率减一

    复现环境 Unity 2021 3 16 SRP 在测试FXAA时发现一个挺恶心的bug Unity Editor中渲染的CameraTarget的分辨率 和camera pixelWidth并不相同 前者比后者少1 这导致了这样的问题 因
  • 3.C++ STL之分配器 allocator

    常用 1 vector 2 list 3 deque 4 set 5 map 6 unordered set 7 unordered map lt 扩充性 非标准 gt 定义在gnu cxx中 include

随机推荐

  • Linux虚拟机IP总是改变解决

    cd etc sysconfig network scripts vi ifcfg ens 改第一个红框为static 第二红框为自己想设定的静态ip 重启 reboot https blog csdn net weixin 4175840
  • 配置JAVA_HOME

    配置JAVA HOME 1 新建系统环境变量JAVA HOME变量值为C Program Files Java jdk 12 0 1 2 编辑Path添加 JAVA HOME bin 3 新建系统环境变量CLASSPATH 变量值为 Jav
  • 华为OD机试 - 通信误码(Java)

    题目描述 信号传播过程中会出现一些误码 不同的数字表示不同的误码ID 取值范围为1 65535 用一个数组记录误码出现的情况 每个误码出现的次数代表误码频度 请找出记录中包含频度最高误码的最小子数组长度 输入描述 误码总数目 取值范围为0
  • docker 报错:Error saving credentials: error storing credentials - err: exec: “docker-credential-desk

    原文 https blog csdn net Saintmm article details 117449183 spm 1001 2101 3001 6650 2 utm medium distribute pc relevant non
  • 给vim增加Vundle和NERDTree插件

    先给vim加了两个插件 windows下的插件应该放在 Users 用户名 vim目录下 然后clone一下vundle cd USERPROFILE git clone https github com gmarik Vundle vim
  • [管理与领导-71]:IT基层管理者 - 辅助技能 - 4- 职业发展规划 - 职业情绪管理

    目录 前言 一 迟到 不积极的三种情况 二 工作动机 动力模型 2 1 兴趣 能力 价值感模型 2 2 动机模型 三 常见的负面的职业情绪 四 应对措施 4 1 职业中应对焦虑的策略 4 2 职业中应对厌倦的策略 4 3 职业中应对失落的策
  • 数组扁平化

    1 一维数组扁平化 let result for let i 0 i lt arr2 length i result result concat arr2 i console log result 1 2 3 4 5 6 2 多级数组 1
  • Java中Thread类run(),start()区别

    转自 Java中Thread类run start 区别 下文讲述Thread类中run start 方法的不同之处说明 如下所示 run start 方法功能的区别 1 start 方法用于启动线程 run方法只是Thread子类的一个普通
  • mysql数据库迁移到瀚高数据库,包含数据迁移、sql语法、服务启动、部署、tomcat问题整理

    文章目录 1 数据库迁移 2 数据库设置主键自增 2 1 数据库字段问题 2 2 存在即更新 2 3 清空数据表 2 4 瀚高数据库查询过程中显示转换 2 5 mybatis插入一条数据返回自增的主键值 2 6 瀚高数据库服务无法启动 3
  • 《数值分析》-- 雅可比迭代法、高斯—塞德尔迭代法

    文章目录 一 基本迭代法的格式及收敛性 1 1 迭代法思想 1 2 向量序列收敛的定义 二 迭代法的收敛与发散 三 雅可比迭代法和高斯赛德尔迭代法 3 1 雅可比迭代法 3 2 高斯 赛得尔 Gauss Seidel 迭代法 四 迭代法的收
  • python无法安装第三方库read time out_(python pip安装第三方库超时问题(raise ReadTimeoutErrorself._pool, None, 'Read time...

    python pip安装第三方库超时问题 raise ReadTimeoutErrorself pool None Read timed out pip工具安装 百度经验链接 pip安装及环境变量配置 pip下载超时处理 aise Read
  • Apache Shiro 简介

    本文转载自 点击打开链接 1 1 简介 Apache Shiro是Java的一个安全框架 目前 使用Apache Shiro的人越来越多 因为它相当简单 对比Spring Security 可能没有Spring Security做的功能强大
  • ztree 修改样式_zTree样式修改

    ztree挺好用的 不过公司美工设计的行政树图稿一般都比ztree原生的样式要好看的多 所以只能自己单独对样式进行修改 目前样式倒是修改好了 只能不能根据层级动态匹配样式 每个层级的被选中样式需要对两个属性单独设置 具体修改地方下面代码中有
  • java里%是什么_java里"."是什么意思?

    展开全部 lt 数学意义 在数字没有溢出的前提下 对于正数和负数 左移一位都相当于乘以2的1次方 左移n位就相当于乘以2的n次方 计算 3 lt lt 2 3 lt lt 2 则是将数字3左移2位 1 首先把3转换为二进制数字0000 00
  • python机器学习手写算法系列——逻辑回归

    从机器学习到逻辑回归 今天 我们只关注机器学习到线性回归这条线上的概念 别的以后再说 为了让大家听懂 我这次也不查维基百科了 直接按照自己的理解用大白话说 可能不是很严谨 机器学习就是机器可以自己学习 而机器学习的方法就是利用现有的数据和算
  • SQL11 高级操作符练习(1)

    描述 题目 现在运营想要找到男性且GPA在3 5以上 不包括3 5 的用户进行调研 请你取出相关数据 示例 user profile id device id gender age university gpa 1 2138 male 21
  • 牛客SQL练习一

    1 题目描述 查找最晚入职员工的所有信息 CREATE TABLE employees emp no int 11 NOT NULL birth date date NOT NULL first name varchar 14 NOT NU
  • springboot自定义favicon.ico

    先上效果图 1 在application yml文件中必须修改配置 spring mvc favicon enabled false spring mvc favicon enabled false 2 在static文件下 ico转化地址
  • LeetCode-Python-1248. 统计「优美子数组」(数组 + 数学)

    给你一个整数数组 nums 和一个整数 k 如果某个子数组中恰好有 k 个奇数数字 我们就认为这个子数组是 优美子数组 请返回这个数组中 优美子数组 的数目 示例 1 输入 nums 1 1 2 1 1 k 3 输出 2 解释 包含 3 个
  • base64格式图片展示

    后端发图片 为base64格式的 前端接收后页面展示图片 处理方法 let imageData data image png base64 res data image 后端传来数据 如果base64位图片没有带前面得头 data imag