专栏首页狂码一生如何把HTML中的图片地址源设置为Base64编码数据

如何把HTML中的图片地址源设置为Base64编码数据

前言:将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。

1、图片用Base64编码支持 PNG、GIF、JPG、BMP、ICO 格式。

2、利用在线图片转换Base64的工具将图片转换为Base64编码,这里推荐两个在线转换工具地址如下:

    站长工具:http://tool.chinaz.com/tools/imgtobase

    C在线工具:http://tool.oschina.net/encrypt?type=4

3、将生成的Base代码完整复制到粘贴板,然后按照下面4、5的用法介绍按需去粘贴

4、CSS中使用:

    background-image: url("data:image/png;base64,iVBORw0KGgo=...");

5、HTML中使用:

    <img src="data:image/png;base64,iVBORw0KGgo=..." />

6、最后预览下我测试的效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Qt操作sqlite数据库

    版权声明: 此文为本站源创文章[或由本站编辑从网络整理改编], 转载请备注出处:[狂码一生] http://www.sindsun.com/a...

    Sindsun
  • Linux服务器下搭建Apache+MySql+PHP+phpMyAdmin运行环境

    一、安装Apache   1、检查系统是否安装Apache   rpm -qa | grep httpd   2、安装   yum -y install htt...

    Sindsun
  • centos下使用shell脚本自动安装程序

    用shell安装程序非常方便,省得每一步都需要人为操作,在这里我自己尝试安装了PHP7到服务器,已经测试成功了我将我写的脚本分享出来,希望能帮助到一部分朋友!

    Sindsun
  • MongoDB 学习笔记

    感谢 Karl Seguin 编写的 The Little MongoDB Book 这本 MongoDB 入门书。

    柳公子
  • python爬虫爬取海量高清图片!这绝对是动漫迷们的福音

    这链接还是比较好获取的,直接 F12 审核元素,或者右键查看代码,手机上chrome和firefox在url前面加上 "view-source"

    一墨编程学习
  • WinNTSetup极大简化Windows系统安装

    这是我在云服务器Windows Server2019系统的基础上用WinNTSetup安装的三合一系统

    我爱你的一诺
  • 经典排序之 归并排序

    Author: bakari  Date: 2012.7.30 排序算法有很多种,每一种在不同的情况下都占有一席之地。关于排序算法我分“经典排序之”系列分别述之...

    CloudDeveloper
  • 精华解读:从BlackHat2013中我们收获了什么

    拉斯维加斯-BlackHat全球黑客大会是每年围观革新安全技术的最好机会,还能和那些在这个行业里聪明至极的家伙交谈并从中得到些关于前沿技术的动向和启示。今年的会...

    安恒信息
  • 一名ThoughtWorks咨询师的“心路历程”

    还记得2015年初我在红螺寺许下的新年愿望:事业顺利、家庭和睦。 验收标准分别是: 事业顺利:我能够加入ThoughtWorks 家庭和睦:“造人”计划顺利...

    ThoughtWorks
  • python语言基础

    用户2398817

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动