通过data:image/png;base64把图片直接写在src里

从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64。。。查了一下资料分析如下:

关于用base64存储图片

网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢?这是Data URI scheme。
  Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。

Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入

Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件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图片数据

  base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png‘));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

  我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。

时间: 2024-08-28 20:53:59

通过data:image/png;base64把图片直接写在src里的相关文章

VUE Base64编码图片展示与转换图片

图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,使用 base64 传输图片文件可以节省一个 http 请求,图片的 base64 编码可以算是前端优化的一环 VUE Base64编码图片展示 <img :src="icon"> export default { data() { icon: 'data:image/png;base64,,XXXXX...', } } 图片在线转换Base64:http://imgbase64.d

BufferedImage缓存图片(data:image/jpg;base64,)转换base64输出与解析

1.比如说二维码图片数据data,不想落地生成jpg文件,通过java缓存文件转换base64输出到页面展示,那么java后端处理写法参考如下: InputStream is = new ByteArrayInputStream(data); BufferedImage img = ImageIO.read(is); BufferedImage bi = new BufferedImage(IMG_WIDTH, IMG_WIDTH, BufferedImage.TYPE_INT_RGB); Gr

background-image:url(data:image/gif;base64,XXXX) base64方式将本地图片添加到文档中

background-image:url(data:image/gif;base64,R0lGODlhCwAMAMZjAElxvlNvtVRxtkp1v0p9wVh7vkqBwl58vml6vml7vm19qHJ+qXSBwXiAwHWBv2eFxk+QzHCJx36HwlCUzoKJw3eNyluY1XuQy1Od1lSh2FWi22qe14uaz4ybz2Sn3ZKdxJKeyZWexI+k1ZilznCv4XOw4Y2u1Xuz4Xe05H2z4JKv1aKs0qSs1Kas1H245oS

springmvc结合base64存取图片到mysql

简介: 1.jsp通过MultipartFile上传图片到后台 2.后台把上传的图片通过base64转换成字符串存到mysql 3.从mysql读取图片字符串,通过base64反转成byte数组,再显示到jsp 1.mysql表结构 2.影射对象 package net.spring.model; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; impor

利用base64展示图片

其实很简单,格式如下: <img src="data:image/jpg;base64,具体的编码值" /> 示例如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>利用base64展示图片</title> 5 </head> 6 <body> 7 <img src="data:image/jpg;base64,/9j/4QAYR

base64与图片之间的转换

实现:base64与图片之间的转换 + 上传的简单实现 1 package com.thinkive.bank.mass.plat.bus.common.util; 2 3 import java.io.File; 4 import java.io.FileInputStream; 5 import java.io.FileNotFoundException; 6 import java.io.FileOutputStream; 7 import java.io.IOException; 8 i

Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示

Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示 在 开发中遇到应用c#及asp.net的在的webservice 保存图片并以xml文件形式现实出来 并用delphi调用 的方法: 1.c#的webservice现实见 http://www.greensoftcode.net/techntxt/20127118441582992373 之前的文章. 2.在客户端用delphi显示 发现asp.net xml形式输出的图片是base64字符串形式.

jquery上传base64位图片

<img id="articleImg" width="180" height="100"> <input type="file" value="上传" id="articleImg 1 $('#articleImgBtn').change(function(){ 2 run(this, function (data) { 3 uploadImage(data); 4 }); 5

GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理(转)

如何获取图片对应的base64字符串呢? 1:使用代码获取: 运行下面代码 var reader = new FileReader(), htmlImage; reader.onload = function(e) { htmlImage = '<img src="'+ e.target.result +'" />'; // 这里e.target.result就是base64编码 } reader.readAsDataURL(file); 2:在webkit内核浏览器有个挺