本文链接:https://blog.csdn.net/kukudehui/article/details/80409522
在做项目的时候,我从后端返回了一个base64格式的图片文件,想把它渲染在前端页面上,找了一下午都没有找到办法,最后终于找到了资料!哈哈!

解决办法就是这样

后来又找了相关用法,总结如下:

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图片数据

但是这种方法不兼容IE6/7,使用时要注意!

前端 img标签显示 base64格式的 图片的更多相关文章

  1. base64格式的图片数据如何转成图片

    base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...

  2. 上传base64格式的图片到服务器

    上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...

  3. base64格式的图片上传阿里云

    base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...

  4. php base64格式的图片字符串和图片文件相互转换的代码

    在移动端上传图片的时候通常会将图片转换成base64格式的字符串提交,所以此时需要使用服务器端的程序进行转换成二进制的数据.如下PHP代码实现了图片文件和base64格式的图片字符串相互转换的方法,同 ...

  5. C# WEB.API 接收并解析保存base64格式的图片

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  6. 如何把base64格式的图片上传到到阿里云oss c#版

    今天碰到需要把canvas上的的图片转存到阿里云oss,于是百度了半天,一个能打的答案都没有.怒了,自己搞起. 代码超级简单,需要先引入nuget 中啊里云的oss api 1 byte[] arr ...

  7. base64格式的图片如何上传到oss

    ---恢复内容开始--- 对于base64图片的上传这个东西,一直是一个问题尤其是上传到oss.我们这次开发由于需要修剪图片,使用了h5的很多新特性. h5修剪图片,使用了我们的canvas.这个步骤 ...

  8. js下载base64格式的图片(兼容火狐)

    //下载图片 download() { let imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUh........'; this.download ...

  9. <img>标签显示本地路径的图片的.NET解决方案

    今天朋友问了我一个奇怪的需求:项目中要求图片上传到工作目录,上传后要在网页中通过<img>显示出来.图片上传后显示,在开发中常见的做法是将它图片上传到网站目录下(upload/),如果保存 ...

随机推荐

  1. redhat6.7 yum网络源配置

    RedHat自带的yum源需要当前系统注册了RHN才可以使用,如果没有注册,当使用yum时,会提示需要注册RHN 如果没有注册RHN,则意味着我们不能使用RedHat自带的yum源.这个时候,我们可以 ...

  2. PHP开发工具 zend studio

    一.搭建PHP开发环境Apahce服务器Dreamwear创建站点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  3. 45 个常用Linux 命令,让你轻松玩转Linux!

    Linux 的命令确实非常多,然而熟悉 Linux 的人从来不会因为 Linux 的命令太多而烦恼.因为我们仅仅只需要掌握常用命令,就完全可以驾驭 Linux. 接下来,让我们一起来看看都有那些常用的 ...

  4. [nginx] nginx源码分析--框架概览

    ALLINONE 所有我分析到的内容,都花在了一张图里. 其中包括: 1.  核心config数据结构. 2.  模块类关系图. 3. 配置类关系图. 4. 主要模块的实例化实体关系图. 5. htt ...

  5. Linux磁盘管理——BIOS和UEFI

    参考:BIOS and UEFI - CompTIA A+ 220-901 - 1.1 BIOS and UEFI As Fast As Possible 严格上来说BIOS和UEFI除了在搜索boo ...

  6. Qt错误: 程序数据库管理器不匹配 请检查安装

    错误提示: C1902: 程序数据库管理器不匹配:请检查安装解决 解决方法: 到D:\VisualStudio2015\VC\bin目录下面拷贝mspdbsrv.exe.mspdb140.dll.ms ...

  7. C#编译相关知识

    C#代码编译成MSIL代码. 当用户编译一个.NET程序时,编译器将源代码翻译成一组可以有效地转换为本机代码且独立于CPU的指令.当执行这些指令时,实时(JIT)编译器将它们转化为CPU特定的代码.由 ...

  8. test20190818 NOIP2019 模拟赛

    0+0+20=20,不给大样例,小数据又水,还没有题解的垃圾题. A 题 问题描述: long long ago, Lxhgww 统治的国家里有 n 个城市,其中某一个城市是 capital (首都) ...

  9. 「NOI2012」骑行川藏

    「NOI2012」骑行川藏 题目描述 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨. 川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的 ...

  10. Union-Find(并查集): Quick union improvements

    Quick union improvements1: weighting 为了防止生成高的树,将smaller tree放在larger tree的下面(smaller 和larger是指number ...