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

注：在上面的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

链接: https://www.fly63.com/article/detial/4921