如何将图片转化为base64编码格式,在css中显示

在前端开发过程中有时候需要图片、svg、ico等转成base64直接在css中使用,可以提高加载速度。将图片转换成base64编码,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。

转换步骤:

1)选择需要转换的图片,打开这个网站

图片转base64

2)复制base64数据

3)引用

  • 在CSS中使用:background-image: url("data:image/png;base64,iVBORw0KGgo=...");
  • 在HTML中使用:<img src="data:image/png;base64,iVBORw0KGgo=..." />

猜你喜欢

转载自blog.csdn.net/wrangler_csdn/article/details/128061777