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
Summary of MySql storage engine and index related knowledge
Storage Engine What is a database storage engine?...
How to use Vue to develop public account web pages
Table of contents Project Background start Create...
Basic learning tutorial of table tag in HTML
Table label composition The table in HTML is comp...
CSS to achieve zoom in and out close button (example code)
This effect is most common on our browser page. L...
Differences between this keyword in NodeJS and browsers
Preface Anyone who has learned JavaScript must be...
The solution record of Vue failing to obtain the element for the first time
Preface The solution to the problem of not being ...
A Different Kind of "Cancel" Button
The “Cancel” button is not part of the necessary ...
Introduction to the use of the four major sql ranking functions ROW_NUMBER, RANK, DENSE_RANK, NTILE
1. ROW_NUMBER() Definition: The ROW_NUMBER() func...
HTML realizes hotel screening function through form
<!doctype html> <html xmlns="http:/...
CSS+HTML to implement Skeleton Screen loading placeholder animation effect (with animation)
Effect Fading from top to bottom Source code html...
A Brief Discussion on the Navigation Window in Iframe Web Pages
A Brief Discussion on the Navigation Window in If...
Detailed steps to install CentOS7 system on VMWare virtual machine
Pre-installation work: Make sure vmware workstati...
Detailed explanation of javascript event bubbling, event capture and event delegation
1. Event bubbling : In the process of JavaScript ...
Analysis of the Poor Performance Caused by Large Offset of LIMIT in MySQL Query
Preface We all know that MySQL query uses the sel...
A brief analysis of the count tracking of a request in nginx
First, let me explain the application method. The...