不引入外部文件也可以显示图片

相信大家对<img>这标签一定再熟悉不过了，然而你熟悉的src后边跟的那个文件一定是一个外部文件吧？无论是在html中这样写

<img src="a.gif" alt="test" />还是在css中这样写background:url(a.gif) no-repeat 0 0;无疑都给页面增加了一个请求，因为它们都是把a.gif作为一个外部文件链接的。那么怎么才可以显示图片又不增加请求数呢？或许你想到了用特殊字符（如果不知道请看这里网页美化你还用小图标吗），但是这种方法只能显示特定的图片，还有其他方法？答案是，当然！先看下边的效果图

外部引入效果：

这个图片效果和传统的图片插入方式没什么区别吧！

正式介绍今天的主角data URIs，细心的朋友可能已经查看了页面源代码，是不是发现了不同之处？就是这堆乱码

原理就是将图片转换成了64位的编码，虽然看起来吓人用起来还是蛮快的。

可能有朋友很快就提出疑问：转换成字符串，会不会有长度限制？答案是有，图片最大为32768 Bytes。

问题继续：我怎样去转换我自己的图片呢？

看这里一个在线的转换工具。

问题不断：浏览器兼容怎么样？是不是都兼容？

这个问题好，这个效果在Opera 7.2+, Firefox, Safari, Netscape, Mozilla都支持，但是IE系列里只有IE8支持，不过这里有解决方案。

还有问题：不会每用一个图片都要转换一次吧？修改起来太麻烦了吧？

可以在需要时页面中动态的转换，php中可以像这样

<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>

其他语言可能需要自己写喽！

转载于:https://www.cnblogs.com/gudao119/archive/2010/04/07/1706022.html

不引入外部文件也可以显示图片相关推荐

【php基础入门】PHP环境搭建与初识php代码书写及演示PHP和JS中遍历数组的区别、引入外部文件等知识点学习笔记
php是什么? PHP是PHP:HypertextPreprocessor(超文本预处理器)的首字母缩写,是一种跨平台的.开源的.免费的脚本语言,其语法吸收了C语言.Java 和 Perl 的特点,利 ...
【极客学院】－python学习笔记-Python快速入门(面向对象－引入外部文件－Web2Py创建网站)
极客学院的课程,感觉很有意思,每节课都很短,但是很干货,我喜欢这个节奏 http://www.jikexueyuan.com/course/203.html 课程背景: Python语言功能强大, 能 ...
vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...
vue引入外部文件_vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 2 在.vue页面使用,先声明后使用 declare ...
vue 引入外部less_Vue项目中引入外部文件的方法（css、js、less）
这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less. ...
vue引入外部文件_vue文件中引入外部js
1.在项目的入口文件中(app.js)定义remoteScript标签 Vue.component('remote-script', { render: function (createElement ...
控制JSP头部引入外部文件编译后在第一行
2019独角兽企业重金招聘Python工程师标准>>> 一.错误引入方法假设当前需要在JSP页面输出xml格式数据,需要引入以下外部文件,通过以下的方式来引入则无法正常输出数据: ...
spring学习--引入外部文件，初始化属性
转载:https://blog.csdn.net/weixin_45496190/article/details/107067200 方式一:直接配置数据库信息 :(1)配置Druid(德鲁伊)连接池 ...
php require的用法,php引入外部文件require和include的用法
require require_once include include_once require 的使用方法如 require("MyRequireFile.php"); .这个 ...
python打包成exe_【Python】使用pyinstaller打包成exe文件时可以显示图片的方法
本文作者:小赖同学最近我在学习Python GUI的使用时,尝试在一个组件上使用了背景图片,然而,直接Run时这个背景图片是可以显示出来,可当使用pyinstaller打包成exe时却没有打包进去显 ...

不引入外部文件也可以显示图片

不引入外部文件也可以显示图片相关推荐

最新文章

热门文章