文档章节

前端——使用base64编码在页面嵌入图片

被毒打的程序猿_先瑞
 被毒打的程序猿_先瑞
发布于 08/25 15:28
字数 865
阅读 23
收藏 0

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片一起发过去而导致图片无法显示。为了便于显示,我今天试了一下将图片转换为base64编码的方法。

现在网上有很多的base64转码软件以及在线转码网站。我选取的是一个在线转码的网站:http://imgbase64.duoshitong.com/

注:在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。   

目前,Data URI scheme支持的类型有:

复制编码后,直接将HTML文件中的对应图片的地址给替换了,保存后运行成功。·

由此可见,base64编码的使用方法也很简单,假定生成的代码为"data:image/jpeg;base64, .....",那么你只需要全部复制,然后在插入图片的时候,地址填写这段代码即可:

CSS中使用:background-image: url("data:image/png;base64,iVBORw0KGgo=...");
HTML中使用:<img src="data:image/png;base64,iVBORw0KGgo=..." />
个人认为使用base64编码方式有以下几种优点:

.将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。
将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。
 

由此可见,除了添加图片地址,我们还可以用base64编码的方式,将图片转换为base64编码,从而减去很多的麻烦。此外,用该方式,系统减少了请求的次数,对html文件运行的时间效率也有增强作用。而Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。因此,对于一些很小的图片,我们可以用base64编码的方式,对于一些很大的图片,它转换得到的编码过于冗长。当然了,如果不嫌弃添加这么长的编码,那也没关系。只要能够帮助自己更好地达到自己的目的,那么无论用什么方式都可以,只要合适就行。
 ———————————————— 
版权声明:本文为CSDN博主「一只野生饭卡丘」的原创文章
原文链接:https://blog.csdn.net/Searchin_R/article/details/82808466

© 著作权归作者所有

被毒打的程序猿_先瑞
粉丝 2
博文 22
码字总数 15287
作品 0
信阳
私信 提问
Base64与图片

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息。 在网络中,通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这...

凡尘里的一根葱
2015/10/01
1K
0
前端战五渣学前端——FileReader预览本地文件

距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒。可能是天气热了吧,有点点躁动。上周看了《哪吒——魔童降世》还不错,还看了...

戈德斯文
07/31
0
0
FileReader实现上传图片前本地预览

  平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上。或者使用前端插件。这篇博客使用的是HTML5的新特性——FileReader。由于兼容性,这种...

辛月
2018/08/19
0
0
Java Web 前端高性能优化(二)

一.上文回顾 上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码、GZIP压缩、懒加载与预加载以及 OneAPM Brows...

OneAPM蓝海讯通
2015/12/09
77
0
node与canvas保存(下载)图片

最近在做一个截图的功能,要保存成图片. 其实这个功能挺简单的,用toDataURL()转换,或者直接用使用canvas2image.js, base64.js这两个脚本实现功能, 部分重要代码如下: //简单的使用JavaScript代...

L3ve
2014/08/11
3K
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是线程死锁,如何解决

产生死锁的条件有四个: 互斥条件:所谓互斥就是进程在某一时间内独占资源。 请求与保持条件:一个进程因请求资源而阻塞时,对已获得的资源保持不放。 不剥夺条件:进程已获得资源,在末使用完...

苏坡吴
16分钟前
3
0
CSS

一、CSS概述 1、什么是CSS Cascading style sheets,层叠样式表、级联样式表,简称样式表 2、css的作用 设置HTML网页中元素的样式 3、HTML与CSS的关系 HTML:负责网页的搭建,内容展示--网页...

wytao1995
27分钟前
2
0
二叉查找树的第 K 个结点

private TreeNode ret;private int cnt = 0;public TreeNode KthNode(TreeNode pRoot, int k) { inOrder(pRoot, k); return ret;}private void inOrder(TreeNode root......

Garphy
今天
4
0
windo8 weblogic

需要的软件包 现在安装jdk 则先进入你电脑自带jdk \bin目录下 然后java -jar 执行你的jar包就可以了 欢迎界面直接点击下一步,跳到更新界面,直接选择跳过 然后选择安装目录(注意:目录不要有...

恩多
今天
8
0
Activiti 批注

Activiti添加批注(comment)信息 在每次提交任务的时候需要描述一些批注信息,例如:请假流程提交的时候要描述信息为什么请假,如果领导驳回可以批注驳回原因等  1、添加批注 // 由于流程...

奔跑的android
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部