base64解析图片

什么是base64编码?

我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

这样做有什么意义呢?

我们正常所看到的网页上的图片,都是需要消耗一个http请求下载而来(所以才有了csssprites(雪碧图)技术的应运而生,但是csssprites有自身的局限性,下文会提到)。

没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了,而base64正好能解决这个问题。

方法怎么用?

1.假定图片的格式是png,那么后面的代码是data:image/png;base64,这样写,注意:【后面有一个逗号】,一般我们接口请求来的 base64码如下图所示:

image.png

2.CSS中使用:

backgroundimage:url("data:image/png;base64, +这里就是获取到的base64一大串的字符串+");

3.HTML中使用:

你可能感兴趣的:(base64解析图片)