Skip to content

在以前,我们插入一张图片,需要先有一张图片,然后再通过 img 元素是 src 属性,填入图片路径,从而插入该图片。但是上一节中,我们介绍了,通过 svg 的方式,可以让图片直接以代码的形式嵌入到网页中,也就是不产生图片文件。

但是 svg 不同于我们以往的文件,svg 文件本质上是一串代码,告诉浏览器这张图片应该怎么画出来。svg 本身很轻量,也只适用于制作一些简单的图片。

我们知道,图片文件本质上是一串二进制数据,我们使用 img 元素的时候,填入一个路径,本质上是把这个路径所指向的图片文件读出来,插入到网页中,那问题来了,既然图片文件本身就是二进制数据,我是否可以直接以一串字符的方式将这个文件的数据写到网页中,这样就可以不需要这个图片文件了,这其实就是数据链接的作用。

dataurl 本质上还是一个 url,也就是链接,所以凡是可以写链接的地方,都可以写这样的数据链接,包括 CSS 文件,JS 文件,其实都可以。

从这里可以看到,以前的普通超链接,本质上都是一个地址,这个地址指向一个文件。而数据链接就是链接本身包含了数据,也就是把这个文件,转换为一个字符串的格式,直接写在链接里面。

数据链接的语法为:data:MIME,数据

很显然,这种方式相当于就是把文件内容直接写在了链接里面,读者可以尝试这样一个 CSS 引入方式:<link rel="stylesheet" href="data:text/css,h1{color:red;}">,这样相当于就是把 CSS 样式表直接写在了链接里。

我们也可以指定编码方式,从而让数据可以变成图片这类二进制数据,即 data:MIME;编码方式,数据

我们常见的编码有 base 64,这种编码允许我们将任何一个二进制数据用一串可以书写的字符串(64 个字符)来表示,这样就可以用字符串表示图片文件。

如下所示:

html
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gNzUK/9sAQwASDA0QDQsSEA4QFBMSFRssHRsYGBs2JykgLEA5REM/OT49R1BmV0dLYU09Pll5WmFpbXJzckVVfYZ8b4VmcHJu/9sAQwETFBQbFxs0HR00bkk+SW5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5u/8AAEQgB4QImAwEiAAIRAQMRAf/EABsAAAMAAwEBAAAAAAAAAAAAAAABAgMEBQYH/8QAOBAAAgIBAwIFAwMEAQMDBQAAAAECEQMEEiEFMRMiQVFhBjJxFCOBQlKRoRVyscEzYtEkJTRjgv/EABgBAQEBAQEAAAAAAAAAAAAAAAABAgME/8QAHBEBAAIDAQEBAAAAAAAAAAAAAAERAgMTMRIh/9oADAMBAAIRAxEAPwDUboW4QjxNnYWTQ6IoQxJe5QDsdk0MIGxNgxMMKTHZCHYFWOyEAsXYE2FhDYhNhYDbExMmyihCsLIikwTJKQFpjRBXcqqTBCGA0AkNBSAb7CCATHQUArGJjXYgLspEopFUx2IEA2SxvuJgS2F+wAAWNMQrApsETY0EULsIAqrE3YrBgFisGSQVYWSwsouxoixgZExpmMLAyWFmOwTKMgWRYWQXfuDZDYrAuwsgL9gKsCQAxtMK5Mm0NoX9Y9o0i2goFpoKLSCgtpFRYURGIGjI0JoIigKoGZRP5BgDAVgwoABksbBhE2A2CRQvUEOhpBCRQ0hpFUIY0hpFCGOhhSBhQwFYDodAQDKoGiCQHQwgAYUFFggYOUV9zSRqIUAyfGx2oqasvurQqhHqFFMCIhhRTCgJAdCRADAAEDGL1ATEyqCiiEh0UkDQVKGDAA9AYMCAQIYADEy0h0BjSBIyJDUQMe0pRMuwbQGGgKYACQ6LSCiqihqJQ6AjaJxMtEtAY9oNF0JkRDRLLfAmQQxMpiIiWKi6FRBDCimgoImgodBQUqCiqGkEQkNIpoCqSQ3kxY1ciopUcrq7nDUwhCVKStP0O2vGxvrX6N5HjU6dcGWGbBminjyKVcNezMGi6C8+mWSb5+6LXuY9V0jLptTPJj3RXEtq9fc7c4VuoZofqJ6bNixZ6TkrT+DehJSVo45Y0KCikvYZzEpBRQ0BG0GjJQUBioKMlBtFCKFJqK5MlGj1HJtioxfmb8v5NYxYnVapwi/DW6SdGpDRarXLzXsTcn/8HT6P0/JPU+Pmxt+OvN8NHpcejx42qikerHGIHznU6bU6TUea1fJ1emat5otTVNHpupaHHlxykkrSfoeK0854uoyg+E3Qygeg7oVFQ5+3sU0eWYGOgLoSRBDEWxUQIKGCAkY0OiiaCigAlR5BotiooiiWZKE0QRQFJDr2IJoEW0FAJFIEiooKEhpDHQBQpDAKxsCmADoYhoqCgGyWA2SxiZAmSNgAnyS+4wZESwooXbuQKiWW+5LJQQqHQIIEhUMABIaD8joolgUIQB8RONlfj6/mVNM6+Z1Dg5GkxwydT8k0puX2P1PTqV7jp8YfpYqPsbE9PDI7mr4o18MvAxK1tvg2ITvs+DuOJ9Q9HjqdJcF58UW4s810rqG1eDlfPoz6JSlBxfZqj531jo2fRa/LGEW8fMlIkxcDvYWsiTRmnh2q2ed6f1NRxqM3TXqdVdWhkh3S28HHmNryt1YrSOX+ujufJE+oDmOxvSBzS7nEXUXuVFvXt/cXmOvvRW9cHGevF/yLS/BeY7sHjcJW0eb1OR6zquLDD+mXcpdRnLdFexu/THTMkupLUZV2VmscKHr9FhWLTpfyZ5SKkv8ARranMscO5sTqU54JxXqjxHU+m5NJkjOF7Vz+WewxZvE/AarS49Ti2S7Aed0GbfhjT7m9+TDDRfp9S8eNVBdjOzzZwJoVFMT7nMTQmimSAmJdxsRAwB9gRQ0MSGAAFgVQyWVQMCRpAMFCgSGMAoYhoABgxMgaAQMgTAGwALGQiihiYC/kgYn3BisAYWDEAAA12AQmNAxQVCZQqFCaBlCZKRI6GIUGAICAYhsQClFyjaRt6Do+ngo5GvXcvhkaNbsu19md/Fh24lGux6tQ0806g4zVxfqauLVyxTa7x9DezYrRxNdjniybsfC9UdVei0+aOWG6LNTqax5F51FnM0OslGfHqYeua3JhW2PPqB57qOlWDUNQpK74NZTpF5c7m7l6mFq1bKi1kdhLI75Ivg2NFo8mrz4YxTqWRRsDG7SQLI/c73VtFDTTx70qWGUpfnsjzcXQGXxGLxW1RjYfgDZ00b1ONSfDfJ73pUsUEtle3B87jL1vlHY+n9bkx6peLk8nyB9BySUcTkcDW6hzld8I6OTP42B0/Szz2fPGeTYn8BXT6fJ5EdTHDjg5+hSxwW32OrgjxYGrqcHDlXocl/ceizr9mVex52Xd2cdglifcbJZwQEsoRESxDYgAf5EMBgKwCmAg/BVVYhWMoAAF2KKQJggYA2CkSyQjJuoneSyWZF7xOZjtiYFOQEgBnGOgCl6AFBQAJlBQEsKKoSQAIoCCaHQ6CgEu4MPUChNCr3KoCiKCiu5SiQY6FRk2hREQIyNCogrSvbqIfk9Sl+2n7nl8MZPKtq5s9PC1hipd6PRqGrqUqtHG1vZ7lwdfUOvwcXXSlC+bid1cjNleGanDsaOr1r1E3u9S9Tl87S7P3NVwWXcmqkgjDXNWEuI0FkTfLAl/B6P6Wj6esnuT9qPNL3PT/SUFkWTzNOPoWBn+qssJyipdtvP8dv8AZ5S+G36noPqGbb8OaVRuTl/2R5xvsJFIG/YlDXcgpGfDmcJJrujA+/BT4XKA9HoeqT/Tz8R7m+KKhDxJ765/7HG0U3uqrXc7On1Ed218/gDraTPtW19zsYslxOVgaklsUTpaeEaXNgbM+cTo89ntZZJquT0apRPP6+UJamXhqkvX3OO0a7EwYM84TExvuJkRLAAAGAAAAgQFUMOwxLuUD5GuwqGAFL5I/A7NKyIBJhYUUSymSwymhNFMRkRQqLoKCJoCqADPQUXQqK2hhRdAwIoCgZETQUMRAAwGAgoaBAJoVFvsFFEUFFUNFE0Ma7joCV3AqhMyqaEygKKxeWSl8nocebdgTu+Dh6Zc0bSyeHwpHfWjJqc9OjidQyRnFxXf+028mohPJKGTuczX8K5XS92dkcbU1JboO6fK9jHhmpZYv34kTne3JujdMz6KKlnhNLfB8S47egGPJpm4z2xbce3yvc05qp8+x7vR9H2wcVTjTSdehwfqLo36KCyQXkv2A88ev+j0scd7S8y5/wAnkPU9f9Ky/wDtmaMkvI21fqWBzvqKcU3G05ykr/HJwkrN7rU93Usten/wR07SvV5ZY1w2uGBgxYZZHwr7ip3SXPY9fpOgPBpH/VkqX+znZ+hZNOoT2txj357yIOIobW23xHu/n2CNObnl7eiMurcVPZCnCHCrtfuYsdylbp/9QG5o8eXNJtVBJct8UdHBjxpKONy293I0sWHJmdZJftr/AGb2OS2rHHywXecv/BR0sOrhp4+50tLqm1Fvj4PPS1Hhf/jpQ/8A2T5/wPp+scMv7s20vV92B67LmUcLbfLOLmSTtPuN6r9Q1sTd9jJLGo47k05HLZA1RMcu5DZ5QWAmKzLJgKwsCgEAUwYgAAYDKpDAaKFQ6KSBIoS7A+xQmWxImUwIJE+CmJkCYPsABCAdABttBQMH2NuhMTGxPsQIllMlkQgQARAxWAEQxokYFDJCyqoBWFlDQxDsKBMLBgDBdxMS5EDax4m/t7mDW5MmFW09v93sbOLeu8TJngs+LZJbX/3PThDLg/qcU35pq/R+5g1GdpbZviSL6lo4Yn51JV/ac7Hjnuly1H5dnUaufGt7adHY+mcEHqvuVvhw9zRyrartM7X0r4eTUvHK00rsD2WDElGkuEaPX9HHU9OyR+DqQROqjvwzj7qgPjeWHh5JR706PS9I1EYdNjkj3jGcJf4OP1nS/ptbOKum2ZtPPwOm6uDV3TRBz8s3qM7m+7PWfSHS1L9/JD8HmunYPF1MOOF3Pp3R9OsOliorgDYeCPsc7qmmjmwuFdjryfBralJwpFHy7qGLw9RKD9PY14rk6HWlGPUMm63zwuxpYp7ZcY0/+og2MeR7UrqK+TYhqI7u/LNHLKWWXlio/wDSh4cc1JtJ/kDpTl4crko7365Hf+DLp9PPUZHPnau3ya3TtH+py2oOfP3M9Dl0nh4tsF/ESiNLVbd+6X9UjoKOJQ7ORpafSzx8zhtj6fJ0caWzl/wjOUDl6j7+FSMDkbevkoy8qOe5Hjy9RdisxuYt5hll3D3GHeNSAy2NMxKQ1IUMtjsxJlJhVjTsix2VVjRFlJlFjRIwpsTGxFCYmNiZBL7gDAAGCKQRAFgBnbFZDkJyLba2DMe4aYRTZNisCIdiYWIgYE2KwLAmwsgpDJsdgMGS2S2UXY9xibCyjLuE5mNyFYGRyLwNeLTNdv2M2GXmqUHJfBrEdnDjVdjYx4b4fKNfS7a8snz6M6OFM9eKNXWdMhqcdbVZ5+fTZ4PFi8dnsqtGprahByUdz9jSvm06hnlHInw+w9LrZdN1Uc+Ge73jfoPqmRPV5p4uJPvZyoqLac5P+APpfSPqPR9USWOSxZ/XFN1f4Olq9Xj0+Gc8kklFep8lntjkTwzla5t8NGbU9T1msxRx6jUTnGPZNkG91/U49TknPHtak9yaHp8ccmjyv1e05cG9nZuk1R19LjyS6XkUVUcck93vwUR07Lh0uROfez3vTNbjzaeOyafB8uyZHd+pk0vU9XpJp4srXx6EH1HUara6XZ+pwOufVOl0uCWm0UlqNS+HNfbE8lr+sa3qEv3s8ttVtTpGPTaSGXE8mTU48UbpJ3bYEK803PPkdvuZMqxxini3P5Zi1GH9NkUVlhktXcGLfkzOm+F6Advo+jhq8Vzg5JnSz9L3NRjDZH4M/wBOzw/po4/F3T9Ul2PR4sMJVJoDmdN6Piw4o3dnQnghCHljz7m2kl6EzSKOJkwN5d08spfk2cUE1QtVGHi+eX8IrFb7cL8CRp9SwQjj3VbOBN8+x6fWKOzzHmNU14jpHl2QksbkLfyY2xHJll3DUzFY0yjMpFKRhTKTIMqkWpGCyrIMu4pSMCkNSKrOmUpGGMilIis6ZSZgUi1Ioy2FkKQWFUSxWF8lDGSikEMoQLuA6AACsbkG4x7gTMFrsaZFjsWLsdkgSxViYWACYWDEwGwsQBDsLATAdisTEyh2KxCsWp2FkjZQ1JxfBtaXJbqUUaTZs6ODnJV3N4+jvaaKatcM6OJeU0dJjkoK0b+PsezEZl8HP6jJeFK/b3o3zm9UUnhkk1yvYo+c62e3Vz5t3w2amSMJSvmL9aN7X4Gs0r9zDj0mSUqj3fYI1441tuN/lnQ0n0/q8+JZdnkPS9D+mlLHHJqU79j036PHiwOGKNKgr5dPTywT2y4fNnf6dh3dDkpJqk+/qZ+odO8fqTSTimd/D02unrD8clR880/S8upilB/yTrOjajS8yi6q7PoWg6NDTu6o29R0/FmhtyJS/JFfI15bKa5+5Nvvwep699PrBklm08f4o8zkg7qSqSAx7fVtfwXGdQqHd9zG4/wZtPhc5cKwPW/TP/pLaorjlvuz12H7FZ5b6f08saVxo9Tj+0gyEyXuMGBo515vKkvkxQpPzSbZt517I11Hn2/JRq63EnDltfJ5jUxSyOt38ns5qO3lWcDqOlllyOW2kcdkI4jiG0zzx7XROzk4Ix0NIybRqJEY6GuxVewJAT+Bja9hUANhYq9wAqyoyMYyDNGRakYEWgM1jMaZSKqmAkMATMiZjGgrIikY0ykyqyARYAa6AdDSOaEikFFUQIdgxEDsdkjAAAaKCgodBQCEyq9gaAgTLaE0UQIoVASFjaAKh9zJp3WVEUC4aLEj1HT53Ffdb9zpw7HA6XnqKub/AP6Z2sc9yPbhNwMzZiyQWVNMpii+TY4+f6f0+bNvlCzNpfp/TYskZ7bcXaOqpGRAOMdq4Bq0DZjy5owXmdAYXosfi+I+ZGyq9DTlrYe44azG3W4I22BCyKrsalfYDDmxLIqlGzznU/pvFqJvJjhUz08mY5chXg5fTGfxXs4Xybuh+ncmGds9dS+AaigNTSaTwYqzcXBF/A0yDJYm7RN0DnSAjI/ZmnkyK+9mTUZGk91I5eTURWSoNP5RR1MdtGpr8OSceEZNLPjnk3JbXHsZmLHk8+Fwbc2YNp3uoRjHtBNnHknfKo82cUjFtDaZKBo5IxOIbTI0FBGJxE0ZKBoDDQVRlcROIsYqCjLtDaLGNFoNpSQAihJDSKH3GKhrsFDCwEBSY1IihoWrJuAx2AGVQstYzZhiLWIUrTcBOJtvGY5QFDXaE0ZWvcTRmkY6BF0CQpUpFUNDQCoKGFAKgobACWiWi2DAx0KjIyWBDJZkaJaIIEzJRLRYGfTZp42qiv8AB39JqHLGrZ5uL2PvydXQueSPfaejXkOx4qE5+xqqL9ZGTGegbWOVs2Y9jUhx6mynwUVOXoeY6h1ndnyRgvJB7bfud3XOXgvbd13Pluq1WfFqJ43J1GT/AJ+Qj0WTXzm/LKiZ9Tnp/uT/AMnnv1uW0kjFl1eTJakW1e/6D1iHUION+aPpZ3YTR8y+n5ZH1DG8bfCqVP0Po2ml+2rINpmJ9wc65sm9ytAg5V6ENkynRgWoTm0nZBn5HuITsaQDczWzZ3zSZkyvaaGoyvb5ZOCA1NVky3J7lz8nPhKe+52v+ky6nNXmlFNe8jnvqWSeXbCPlKPS6CUavdI6O7y8M89osk6V2djDdWQLUyf9qZysuOTdtI7GWaS80Tm6nJFvynDZCNKhUUD5PPIihUXQMiIoVFioImhNFsTIJoKKACGgosK9gCrQUMZVTQUWgKqGFF0KgiKGyqFQCoB0BR2liG4mVCkadGvKJikjYma8wjBJckFzEYRI2OhoCUBQAIQxMBAwXcGQAgAITBgxN+wUMmhtiYAxeoAwHj4flSb+Tp6PLJceGcyF3aOzoXtj5md9aNuM7j9rQRlyVNxmjDsj/SelW1Fpo2F6GnjuPczxnaoonV5GsbR886tp46HXuepwrNjyO0+x7/PNbabPOdWjDIpQ2xf5IPK5cmLxIPGlGD9F6Dk9FFOLxSlP0aY83T5vL+3FpGfBoZ4Z7nG/W2UdboGk8D9xLzzXY9XppNR72zz/AE2cX3pHcxZOFTQGw+X5h7jE2ka2r10MHkUv3ZdogGuzTk1iwvn+q0LT6dRSpV/sWljKS3TXJtpEDhwOc+AojK6XYDWzZXfejRzTjFblLcbeWWON7kcXqGTHs/bn4a9UlYGj1PqE5+TZKLf9RpYNLLFJZMqu/kxzW/K1j8TI7+7J6Gxj0tO/Ec8j/wAIDt9Ok4xu2r9Dt6aarzM83osc4vnJf/tO5hlHbymBvTcGuTm6qWGH2xTZtNpw4kaOoi1/SjhsGpLl8CKYqPMhBQ0MCWhMtk0ESBQmZCEygCJHQ6ABUMEBVAwGiqQFBQE0FFCoomgKoAO22Q5GGWYwzzG7aZsmQ15yIlkIbslopuxE2FmUWOyBgVYrFYmQMTBiYAgYCsqGJgJgD4JGyWQDJsTCwHYrJbFfIGxhWRy/bfJ19Is1fuwicbBkcZcHW02obXMGzvqG6oseylwRHPD2aM0JbkepWCUXB8cmTFl5+QzQtcs1d8cPCf8ALAzandtbi+DzWv1s92SMMcZV6s72qzbtLJJ8nKjp4zizLvhjbz2p1GrzJwb2xvtHgMGt1eJqEpeJBKkpqztT0XJijoU5PgL8NXB1LPBS/Yi2uPyje0/W8qxpSw20JaOl2Fj09ZFGK5boLGuE6v6k1Cl4WPHtndWbvSNBmlP9Rq255X7+iOFmmsnXIxxxuEcu38nucWNYohwn1cI0i0iVLkpv2KiZOlwYMk65lIzZHGvNZzNbKDj/AOrkjfpQGLWuGT7pHH1GkvnJN5l6JxqjZwYcm97pzcfRtG28DivMnyBx5JfZsj8LsY6lB8qMfyztvHjS82zJ/wBSNWWDSOVwxPf/AGxnRRrYs8Iva5W/eJ1dNqqiuG0c+WCPpodtesu/+SsGTwmlulH4ZJHZefjmBrZsl+halKUE1yjXzTd8o8+wYxkWM8zKkNdiUNBTCgGUS0KixMUIYn3LYqIiR1wDAAAGCIKXYAQLsaUx0CGgqWDGwZUIAABvKS5shislotMqzGmNsWqrCyGwUgjKFkJjsgqwsmx2A2DJbFZUUxBYBRYAC7gJ9xMpioIxshmWSIaAx/gPyVXuSwLwylCVxOxotXBqnBp/g42O4ytHU0uqm1U1fyjtrV0/GXoi8c77GtHPH2M+Kd9j1wrJO2uTnZ73Oo/ydO7NXVYXki7dIpDQx5ceRywq+Y9xYIUv9GnqMmTBqI+Hj4T5OhGcJfuY5pwm/T0Zl6NcpljRHgqzYaElYbYJwSjyaWozQ0WmyaqfpxjT9ZHSkr8vp6v2Od/xeTq2u36q46TFxjh/d8kTLKoaf0r02Wr1stblTjix8pP+qTPXSlc2Rjxw02GOPFFKK9hd3YedkQ+64JgXFBGLNNxXJpyxeK6kmdDJC+5EcdFGDHg8Ncf7FkcKqaf8GeT28M08zyJ8JP8AIGjqNRoN+2eOXienoc/UdS00J7M+GS9m1/5Opmnkmtv7cZem+O41lhyZcbhrdNgyJfbkhw1/BRgw51ONY82SK/Jke/cvGcZR9Go0Y5dM0+NXCeRChKWNbYynKPyB0cNw7PdEeaClyjV0+ZxfwdDE98exyzxsc6UaYkbebTW7ZryhXY8s4okaEFmBS+SjHZSZRXoCFYwoaEx2JsITENksAYILABoZKYyCkUShoqmxMLAoTAKAI13MW4wuQKRKRn3BuMKmPcKGRyBSMO6+xUWEZky0/cxRZV0QZLCyGxWBksLMbY0QWFiAqqQ/ySuwAUgEFlQMTQDsCGiWjIyaCphGLfLOpooY69zmR79jqaHc+FCjtr9G68a23xEUHFPmZsLDceTTyQeObpJ/k9cK24ZFXlKdSVdzRj4k52538dkjbh24KrR1miWRM52la0WaWFxfhS9fZnoZRtUambSKa9jK4zTFDlWmpR90ZNnl5NCWhnCf7UpQSXFMrHps+5ZM2TJOXamw69G9jxKS5M8IbY0uwtPi2QSM6XBHOZtiURxiZFHgaQZQolxQ0hpAJITRkoGijXlC+5glh3cM33ElQoDQWgxz+9FfooY1xBM6FJolwKOTm24+0I/g5urztxrbGD9Pk7mpxQa88Is5Wqhp4qp42oP+QORj1E4ZKyWdbR5HKPc5WpjiryTtLsbHTpybSkZHYeLcuWa+TTNGzB+7DJurg5ZYjmThRBsZoyvkwtHmmKRIwAgLGmIVlVdibEhMAsTYmIgdgSMIdlJkUwAyJjT9zEmUmBksLIsLAuwJsCjQsTdisCopFEWUiIY4iGgLi+CkzGmVYFJhZNj7kFoZCLRBS7DJHZAwslsaAoLBdh0VSQANFUhMqhSQCj9x2Omyh/Jx4xcpdjtaDA4xXFHfV6jqQ5FlwxfNFYvZGVnqVofp+bZajSpGzKPsQ4hWJIHFGRINvuQYXiQvDtmZoaXBBjUaZVFA0AkuAS5KYkAAMEAihFFBQMAAQeg2vYmXwBr6hJxdo4mphPFbx5d0H/TJdjt5siUeTh6203KHmh8FHG1Et2RqePa/Q2dA5wd1wYpzjOd0belaRB1MWWLXKNj7o+UwYXFr0NhcLgzI09Ti9TSfc3tVNvuaTPJn6JaCimBkRQUUIBCKoTCIaCiqAKhIpIqikiiGhNGWiGiIxNUBckSQA13BIqgEBaQFHKQx7QKyCkJIaIKRQhxJYEh0UkFWLEsaHtHQAikIZFMlsGSVDstGMyRAtF+hKLDSBxGyfUgsl9xoQVUOGdfSZPKrOTjXJ0dNUFyz0avSnUxzv8GwnZoYcm9quxvQark9aLIkNsVkEsVjb9hIihIBjCpD1G37AAvUA7dxNkFMSJ3cisDIMiLKsqKVA0IaYCr2Inx3Mj7GOXYDR1U+HtaOHrE5x3YPJNd4e51uoY5JXA4Gfxcc7ToqMUMTnO/VnQ0+Lakpo1oSk6lFL5Ruw1MkuY2FbcMUf6S2pVwzTjqW3xSNzDldcpMxlA1cyduzXN3VNPsjTPJnAQm/cTZLZgUxWKwsCgJsaKGxIYgKiUQilIBkspyIb9giZCG+REDQ12EMsCkAkBpWikKjOsdh4RhhgcR7aMzhwG2wIjEaRkUR7eCCEhjr3CgCgopIdFEAymJkE0Jqy0i4QC0xqJSVGZYynjNNUxxKCqFfAAyGWySITYRYmOIGbGuTdjKMY8K2aWLubUPKraO2v1psYcsqufl9kbOPUNvhHJnmqdya5Lhni6SypHshl3YTtDbOfptVjXljLczc3ccEGS+QcjApclOXsRWWMgbMce5kXyA0KcvYa7EtEVFtg2UyX3CEVViXAwKiikSmG4KqwskmUq7lRbfyYss6RjyZ4R7uzVy66D4aKMOr1M4vzK0c3Pc1ui00b2SLyJps5mfH4f2PkDClk3XFcBLUTjLhNfkyYrvidMztxr92C/KCMWLNDM+HtZ09Nwqs5U8eLdcWbullwqdklXRywTic7OqZvuXk5OfqO/DPLsGFskH3A4If5CwodAJDAABsAGADBdhADFITZLYFdwJsf5AdjslgaRdgIC2L20G2yhkVj2CUOTOlYbS0UwqI1EyUFEopjcROBn2icSLTFtFtMrQqCUwtcjjEybSoxIRCFAywgCVItMrpEKjEJKhKZOSZpuoY8hh9RznyY2+SOeULslsSsCMEyosTQJERnxumbLl5LbNSBeW9nB21+tObr80nOoMrQabLlv292zHmhGM7k+DJ+uXhbMUPDgvnueyB2tF4Om8sXvl6nSjntc0jymPXRxRt5Em/Q6ej1ni8e4lHWlO1wRiyO6Yo20ioxqVmYVtYl6mV9iMXESn2KGvkTJvkXcik+Qa9xpCfcAQySvQAQmEhxQFLsY8qg1c/QMk1FO2cjqOrjsqV7fhlRh6pqoYL8N8+xwM3jNeOsmVbu1PsRl16x5pTWOb9FvNDUdQzZ5cso3MHVdZp51KfiRN2Osed2qs4mLJRuYMqT4VEHcjghmh2qRFz03EuUa+PO4riyM2syr7k2vwBt5J4Mke1GTReV+WVxOPPNfMZG50zKlKnIg9DW7GaOog0zo4KcDBqsZw24/g51AkZGuRM8oSQUMb+CokVDfAMBMXqNksCkxMSGBMiHyWyWgoQxUOihWFgwQQ7AQAbCGu5KZVmlXEsxRkUpGgMEDBIUHYWRJ0+Sd3Jmhn7kNBB+xf5FCKBFNES7cCg3IW4xXyFmT6U5kSyWNonbyaX6TywivcyRiUogTXAOJVFNERh2lJFidEBFUVK5R4JRtYsTlC4nTX6POdVjkhHccaU8jlakz1vVMNaeVxs87gxrJk7cI9kBYNLOU4trdN+nsen6VCGKKqpS9fg4azwWXwMNSk/ukdXHPZlWnx0mlcij0WJ7lZT4Zh0v2xXsjYyIgz4+xbIw/aZAMb4HEbQJAJ8Copirggl/BS+SWXFWVUOO5mSMOCooG/YIwaiMUnZ5/qUcd7sPp35Ox1DL4cO248nrtX5vJG0Bqat6ea/cx5IpvmjQzaXFDnHOU4f9i9ZJtrJjm3CuVfKNdZci55f8FFRUE/25/wzOo7uz5NVyUuXBG3puXadr5INzA2o83yZMuTJCFGbFsUUpUzJkwwnB7HYHNbjkV7afwZtBFeLZrTjsyNLhm709Pf50B6XRV4apl6iNrgw6XypUbScZLkzlFq5ORUzHZvazH7I58uGePLGkUmUuxiTGpGRkYpEpjAlkst9iWAIpEWUmEDQUUmFASkFFA0BDQlEypDcQrFtAybQAiJQ0NI0ifwVFsTXPA4oKtBuokmTNKUnzyY5vkpkS5MouGQyrIazQtzQRuqVgzUjloyeJaAJdwj3E37hFmUWT2KZD7kVaYmyWItqtMpMxL5KsqLbFZDYWQWu5v6Tj7Wc6J0NFyzpr9Fa7AsuCR4zNjyYs04KTjHsfRHCOzk8v1nSfvNwhweyFcLST8PL5Yco6vS2llyZJ8zb5ZoYqjmexdvU3NDkcLt9pWUer0zVI2J9jn6GbklK+50e8SCsEuKMzZq43tnybFgNAEexXoBDJGzG/uoCjIuxi3c17GWHYCkDKiE1wByerTUMMn8HgNTlnkyupSX/AIPa9alk5cVfweP1MHjzTyS8i9vcDQlCfO62PHmnjfkmzKtUoytR79ycix77inT9gH4ikqlLl9+Da0uLnyKzUjibapHb6fppqNxTKHGNUGTLsa9mbWWMZOpPbM0ss5w8k+UQVLBDKrfqZcOKWJ89vQxYJKPD7GeGbZl2y5XoBuYs0l2ZuYMz9TmN82uxt6eTYHRyPfHscrUxakdXGriamsxcHn2YjnBuCSJZ5hSkWmYUWmEZCWCfAiqTGmDXAgi0WuxiTKvgKsaZjsLIjI2G5GJzJ38hWfcBh3AE/GZsaMaLXc3EKpCZtQ0WWePckYsmDJj7xZv4kYm+CGNgjNCAKYrIBoxyRkbIZERRXYaQNEQIuJFFxKrJ6EsfoC+SUqaBotIdFpUKAOJaLa4LSNegceDK4k0KEI6Ggn5jSaNjSS2yOmHqO1HldjR6hpvFg7NzDK0jLlxbonrjxXjM2jlCbWKPcy49Gm4x9PU7+TSU+FyYo6OpdgM+ixJY1x24NyqRODHSoySXsQYJ8PgywlcDDl4fIYJ2gNqDKfYxxZfoBMuxhb9TLk+018nACxu8nJuxXHBoYXeWqOjEC4imrRSHQHM1Wj8WV+x53qfR8maTyO3BelHsZxsxyxLtXBR8yydOcLq7vtQ4dKzNqt1fg99n6Zjy5N7X+iJaCCXZIDy2i6Q45U/Mjs5UtNi8v+zf8OOKLOB1fWJ8XwBqSl42Vt8MjPBxpp2jDhyLIqupC8dpuM0QZobf6jZx4bVrlmlGaycNmzgnKPqBn8Rx4kjb02V1wacXvl5u5u6bB7AdLBk45J1T4JgnAnUNuJjPwc7L3MTMuT7uTGzxSJKASZGVxG2Y9wOQGSxPsQpDsqmxNkSkQ5BWTcNSMKZSJUotsTZDYl3FSMiYCi1QA+W1jhLJLbFWzr6Pp8MaU8ncy6bSw0sPLzL3Mk5nvw10Wyb1XBMnF/cjE5BZ0pE5NJhyd1Rqz6b/AGSNyxqVdjM64HHzaTLD+mzWlcXUk0eiu+5jyafFl+6KOc6i3n2/YEdbL0vHL7HTMK6bNPvZz5SrTSBxOhHp0wfT5k5yrn7RpG9/x8x/8fP3HORpoTdm69BMiXT8nuTnJbVTByNpdOye5f8Ax067jnI0oyKcvY2l02fuP/jZr1Y5yNNy5E37m4+my92D6bP5HOUaVmbTvzGZ9Nku7YLAsL5N44SN7BPlI6UFcThYsm7L34O5ppqUFTPRAcsNk+DybCAKwxhRM0Z6MciDTzx4NbBLZJpm9lXBp5VtfAGzGRUZmks3Yy48lsDYm/Ka8l3bMk5cGKT4ArTR8/Jvx7mhpn5+ToYwMiGCGyiWTRdC/AESRhnFGeRj/IHI6jJQizxvUsjWf7t1+nsep69qFii7Z4nUSvM37gPxNrtFRyeK+TBNeW0GJ7clkGzgl56Z0sSdGhGF5Nx2NDiclyBk0eFufmOvjxbVwTg06iuxspcAa+TLXBCyqSphqIp9u4tPj390SYsaWpVSMD7ndloYy5Yf8dD+04TptHAZNnoH0+HsS+nQ9icGXAv8lcnd/wCOh6IpdOj7F4DgpS9Ex+HN/wBLPQx0EV6Fx0cfY1xV5z9PlfaJUdDlk+1HpI6SC9C1p4I1yhXnsfTJvu2Zf+Kfyd9Y4oe2JrlCPOz6W/kwz6dkXaz0+yPsS8UX6DlC28s9LljxtA9O9NB+gGeMLZyRG2zIxep6GGNw9hbTMmDaAwMEZ6iyXBegGMCnD2E0AWCkxUBBkWVopZUYQH4M+9Bu+EYL54KUh+Fsu9UG4xXYuRRbNuDcYdwbhRbNv+B717GGwsUWzKaHuRgsGy0rLOUaOV1DJw6N9mDLpo5USlcnHmaR3OlT8vLNF9MT+1m/0/BLC0gOomNEjMgbMbKbIZFY58o0dSmlZvSNbNzFgcd6peN4cu5sYs/7lehyuqfs6vHP5Lw6hS5+QO68nPBLla4NWGXdzY45fQDbwS851MP2nGwSuSo7eJVBAZPwCAAB9yRiZRMjFkflZlZr6l7cUr9gPB/UmpeTU7HKqZwZSt9zd6zmhPW5FBt892aDIM8H5aCEfNwTjN/R6bc+UBt6PS70md3RafbVGpo8PhpL0OxhVAZYKlyE+FwW/gjK/KwOfqJVOzZ0vJo55bslI6GjXlKjeh2G5GNCcjSMjkJsx2WiopFIlFAH4GITYFNismxEVbFYmxBF2F0TYrAuwIACWJjQmUFisGC7AK+R2DQANNlfkgdgNxQnEYAQ+4P4LfPcW0DG+4rLcCWgEwthQAPd7hwyRNgXz6Cv3I3tD3e4FbgciWk+xDi7Au77GbHhyT9KMujwxUbkjbVf0kWGvjwbVyZIxSlwZJMwp/uURWzQMa7BRBDMb+DK+xNEVinwa2Y25I18itMDyf1JPwlDcv6uDQ02qtHR+q4t6e6unZ5nT59svMB6rTahNPkcs/NpnBwaypcdjcWotFHpemSWaas9FHhHlvpd+Nlk12R6kA9RWNiIATGSwFI5XXNTLTaGc4v4OpL/AAeQ+t8k/wBPjhGdJvlAeNyzeTJKb7vkUFZUMbbNjDg5ArBhtq0dzRYuDTwY6R09NSIN/DBUbuM58cqizbhLgDbb4NfUS4dA5MlpvuUcx34x1tL9hoajC4TtG7pXcCwNqxIaRaRtgor3LATYDQNktibCqbsTJAIoLJY7AdisTEBdhZNhYFWBFgAfgLEMAYADQUAFAghioaAAAAIAYgsAC/cAATSZLgygKMUkyWZwcE+4GuxWZnh9jHLHKPcCexUZU1ZLJl2A23mlJxjHsbfiKEO5yMWo2ypnN631bUafZ4CtN8klp6SWdP1K0y3zv2PPaXV5MuGM58Weg6XKUsdyVEHQFQCIEyX2KZDIqZLgwyS9TNJmLIB5z6kwOenlt9DwtOz33XcyxYZRm64PDyVzYGOEmmdDBP8AafqaKRvaZKgPafR+DZopZH3mekOJ9L43HpylL1O2UJgNkvuAMllMRBjn8nkvrDTxyvHL1PXTVo8r9Uxe/G0+APM4cNIzxx0RCfDsHmIM8Z7WbWmzc0c1NykdLR4uVYHQxQU/uOhhijRl+2k0bune5Io3I4ky1iiPF9opScZgTk0ikTHB4Zuw5QSiiwNXsFlZce18GKzbKmxWSCCGFgIBgIYAwsGIACwABhYgAdgIAh17AkZVFDSRFYq4HRlofBRiSHtMnHoFgY9jfYez3KbDcQT4YLGU5C3BT2INq9hOQWEOl7A0vYTYKwBxQnFDBgLag2r1QxgRSB7ShNIDFPHCXqa2THXY3HjRLxAcnUQdcHG1jyKXnVo9VPTKRqZum+J2oqudoZ/qJYsWLmnyexwY1ixKKOP0bR49FKblFJs68cim+GZVk7kZJ7CpTSRz9fkdKvciw3+8SJfkWOf7Mb9jFPMo+qAp5KlTB2zBkyqav1RjnrIxSvuByvqrSLLo/E53R5PERi+57/qGojm0s1x7Hkcun8zaCOY01I3MLe1KMXKUuEkVLTy9jt/SvTvG1+/JC1jX+yj1vRNO9P0zDCSqW22joC9CN3NEVbJsTb9CJScQMgdzDjzb7Li22BUu3J5L6twyk4SjxR6xt+pyPqHpq1+i43KceU4hHzyeZpU+5Cy2x5dPkhllB3adGF45xf2siulpXbR2dK40jzeCeSL4hL/B1NPmzV9khQ785Rli7l6XKox5ZyYTzNLyujK/HS8kGUt6HDnVdy8+VbLTPORzayPHhs3MM87h50B18GqTh3Mzzpq7ODLHqdv7ZsadZ1CpgdNZlk4Zjfcxwg0ikmVFqh0iVEEiooVIVMKAfAWFBQADCgoBBQ6HQRLEU0G0CQHtAozN8CcgVDSIFYDC+SqlDaY7HZETT9Q22OxXwA9ouAQAMCQXyUUAgYDCxA37EDYhMHyAwbFQbSgbAFYcgDXyKg5B2AUKvj/Y1YKwGnL3kRJOaqRfIK/YipnveLYnRqanBq5NeC4NfLo3efYdcELcfNPV4VUtLkl8wdmjPWZXBtQnCcf7os9Ol7CnjWT7/N+Qtvn+LWazNky71LzPtRs48WSXdM9lLRYm/siv4MctBH0oI8xHTSa7HpvpvHHFhnX3PuRLRV2j/g2ND/8ATqVxZR1ZS4MeN7sj9aNJ6qdyioyLw55VSVGVtuyfsY88tuGTfojFLNwY5ajxYyhta4oUMXSm5455H/Uzd3Uzn480tJgUIY3Jr2MvjybVwYW25OXl4FHKmuWaks0vZmspZvFp45bfcDT6v03B+p8WEeZdzUhoMf8AYjr6jFkzST2kx0k/YrLnw0WNdoL/AAZ46eCXEUbsdLL1opaZ+6KNRYYopYUbX6d+41g95BGssSKWNGwsEf7mPwYfIVgURrgz+FAPDgBiTHuRkWOHqhpQ9gMW9DUkZOPRDf8AAGNTXsPcvkv8CAn+GFX6Ddgwg2hQWFhRt+QcfklgEVt/9wbV7k2AFUgJoCi7BgIABggBYsAYMAsLAGAAwCwD8AIYBYACAPQKAAAAAAQxIAGgbEmADHZIAVYEoAKAkLAobICwLQORDYAVuBskYBYdwBgAMVgAeo2xCFCrAldhgOwsSAgdjJGu4DsBPsBQ/QQMAABAwGIAAAYCYDFYAwCwsQUA79wsVCAoLEAAxDAgLEFgyhsBAQWDAChrsJdwAAfcAAAQAAAD7AAAxeoAA2CAABgAACBgAAuwAAAgYAAAuwAALsC7gAA+4gAAQwABPuNdgAAAAAAYAAPuCAAECAAGgXcAAAfYAABgBAAwABMEAFAD7gAA+wl3AAGxAAAwYAAgfYAAPUEAEAD7ABQMAACfQbAABAAAf//Z">

显示效果如下:

![Pasted image 20240322154033](/notes-assets/01.HTML&CSS/4.CSS进阶/assets/Pasted image 20240322154033.png)

显然,这里没有引入外部资源,仅仅将图片转换为了 base 64 编码,这个 base 64 编码后的字符串里,就会有这个图片的完整信息,从而就可以仅通过 HTML 就显示了一张图片。

这种方式一个显而易见的优点就是,干掉了文件,在用户访问网页的过程中,一个文件就会产生一个请求,而每一个请求都会占用服务器资源,也浪费时间,所以这种方式干掉了文件,可以将文件的数据直接写在链接里面,也就减少了请求数量。同时,由于此时文件数据变成了代码,也很利于数据的动态生成。

同时缺点也显而易见,把文件内容直接写在 HTML 文件里面,这显然增加了 HTML 文件本身的体积,在访问网页中,HTML 文件体积增加后,传输速度也会变慢。这种方式将资源的数据直接写在了 HTML 文件中,也不利于浏览器的缓存。

浏览器会将图片等资源缓存到本地,当再次访问这个网站的时候,浏览器发现这个图片已经被缓存到本地了,也就直接从本地取,不会再从服务器请求。

这种写法存在很多问题,同时优势也并不明显,所以应用场景也并不是很多,只有在请求图片的体积较小,并且该图片不适合使用精灵图,只有在这种场景下,才考虑使用数据链接。同时,如果图片是由其他代码动态生成的,也可以考虑使用这种方式。

一般只用与图片,对于 JS 和 CSS 文件,我们不会使用数据链接。我们也提到,一般图片我们会使用 base 64 编码,但是 base 64 编码会增加资源体积,增加量为 1/3。

数据链接本质上还是一种链接的方式,不仅可以用于 HTML 文件,像 CSS 文件里需要用到链接的地方,也可以用这种写法。

以笔记为镜,可以知得失