Introduction to using data URI scheme to embed images in web pages
|
The data URI scheme allows us to include data in a web page using inline code, which can be used in Html, CSS, Javascript, etc. The data URI scheme is often used to embed images into web pages, as follows: <img alt="He Chongtian's headshot (your browser does not support the data URI scheme, the image cannot be displayed)" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBD/*A lot of data is omitted here*/NONPmfvcqcdZR7XT27n//2Q%3D%3D"/> The data URI scheme has the following format: data:[<MIME-type>][;base64],<data> This format is relatively simple. By comparison, we can see that the above img is a jpg image encoded using base64. Embed this img into this page and it will be displayed as follows:  In addition to base64 encoding, you can also use hexadecimal URL encoding in the form of %xx, as follows: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : Generate image data According to the above format, we can write a small program to generate it, but we don’t need to be so troublesome. There are many websites that provide this (free) service. Here are a few: 1. http://dataurl.sveinbjorn.org/dataurlmaker Provide preview and easy copying.
2. http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ Provides preview and can generate corresponding CSS URI data.
3. http://software.hixie.ch/utilities/cgi/data/data Tip: The generation is not limited to image data. There are three ways to use it (see 1, 2, 3 in the figure below). You can specify the encoding method, but the interface is not friendly. Use in group presentations Click the Insert/Edit Image button:
The following window pops up. Use any of the above URLs to generate image data and copy and paste it into the image address text box:
Click Insert, OK, as shown below:
View the effect: http://space.cnblogs.com/group/topic/41938/ |
>>: Complete list of CentOS7 firewall operation commands
Recommend
HTML basic summary recommendation (title)
HTML: Title Heading is defined by tags such as &l...
Description of the writing method of foreach array in Vue and traversal array in js
How to write Vue foreach array and traverse array...
MySQL 5.7.13 installation and configuration method graphic tutorial on Mac
MySQL 5.7.13 installation tutorial for Mac, very ...
Complete step-by-step record of MySQL 8.0.26 installation and uninstallation
Table of contents Preface 1. Installation 1. Down...
Mysql 5.7.17 winx64 installation tutorial on win7
Software version and platform: MySQL-5.7.17-winx6...
Detailed explanation and summary of the use of Linux scheduled task Crontab command
The crontab command is used by Unix and Linux to ...
Implementation steps for building a MySQL master-slave replication environment based on Docker
1. Introduction The previous program architecture...
Implementing add, delete, modify and query operations on MySQL based on sqlalchemy
Demand scenario: The boss asked me to use the cra...
Detailed explanation of the failure of MySQL to use UNION to connect two queries
Overview UNION The connection data set keyword ca...
Vue Router loads different components according to background data
Table of contents Requirements encountered in act...
MySQL daily statistics report fills in 0 if there is no data on that day
1. Problem reproduction: Count the total number o...
Docker file storage path, get container startup command operation
The container has already been created, how to kn...
GET POST Differences
1. Get is used to obtain data from the server, wh...
Example of how to automatically start an application service in a Docker container
If you want the application service in the Docker...
Detailed graphic explanation of mysql query control statements
mysql query control statements Field deduplicatio...