HTML Base64 Images
To display a Base64 encoded image in HTML, you can use the
img element by setting the src attribute to the
Data URI that represents the Base64 encoded image data.
Syntax-
<img src="base64-image-data" alt="Base64 Image">Example-
Here is a basic example showing the base64 image in HTML,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64 Image Example</title>
</head>
<body>
<h2>Base64 Image Example</h2>
<!-- Displaying a Base64 encoded image -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAJklEQVR42mL8//8/AwgwMSAA9CNFsQcDG0FYABRhsdU2SK+AAAAAElFTkSuQmCC" alt="Base64 Image">
</body>
</html>
In the above example-
The src attribute of the img element contains the
Data URI that represents the Base64 encoded PNG image. The format of the data URI is
data:[<mediatype>][;base64],<data>, where <mediatype> specifies the media type of the data (image/png in this case), and
<data> is Base64 image data which is encoded.
Note make sure replace the src data from your actual base64 image url
Output-
Also, Read: What is the use of HTML Iframe?
Leave a Comment