由于不想把图片上传到服务器,占用服务器的空间。想直接嵌入网页中,应该怎么处理?
在网卡搜索SVG转background-image图片关键字搜索出来的工具都不能用,
有搜到的也是类似这种
.element {
background-image: url(/images/image.svg);
}
我想,这都已经把图片上传到服务器了,那设置成背景色那不是很简单吗?
我需要的是不上传图片,直接设置成背景色
然后东找西找真让我找到了一个工具,上传图片后可以转成 base64编码,再将base64编码转成background-img url(),直接嵌入到网页中。不多说,直接上图
-
打开工具
https://tl.beer/64img.html
-
上传一张猴子图片,左边内容区出现对应64编码
-
把编码复制出来,嵌入网页中,猴子图片又出来了
完
附一张SVG转换后的代码(上面的动物图片编码太多了,这是张小图)
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgo8cGF0aCBkPSJNLTIgNDAgTDgwIDQwIiBzdHJva2UtZGFzaGFycmF5PSI0LDQiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjNzBkMzlkIiBmaWxsLW9wYWNpdHk9IjAiLz4KPHBhdGggZD0iTTQwIC0yIEw0MCA4MCIgc3Ryb2tlLWRhc2hhcnJheT0iNCw0IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzcwZDM5ZCIgZmlsbC1vcGFjaXR5PSIwIi8+CjxwYXRoIGQ9Ik0xIDEgbDc4IDAgbDAgNzggbC03OCAwIFoiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjMDBiMDUwIiBmaWxsLW9wYWNpdHk9IjAiLz4KCjwvc3ZnPg==