--- title: "How to display Base64 images in HTML" description: "There is a simple way to display the base64 images on html page using HTML \"img\" tag." author: "Ashutosh Patel" published: 2024-06-10 updated: 2024-06-10 canonical: https://www.mindstick.com/articles/336066/how-to-display-base64-images-in-html category: "html" tags: ["html", "html5", "html img"] reading_time: 1 minute --- # How to display Base64 images in HTML ### HTML Base64 Images To display a **Base64** encoded [image](https://www.mindstick.com/forum/12890/how-can-asp-dot-net-mvc-controller-return-an-image) in **HTML**, you can use the `img`element by setting the `src`[attribute](https://www.mindstick.com/interview/1137/what-is-attributes-and-reflection-in-c-sharp) to the **[Data](https://www.mindstick.com/articles/12634/how-big-data-can-help-cab-aggregators) URI** that represents the **Base64** encoded image data. ## Syntax- ```html Base64 Image ``` ## Example- Here is a [basic](https://yourviews.mindstick.com/story/2147/these-basic-questions-made-mahatma-budha-an-enlightening-being) example showing the base64 image in HTML, ```html Base64 Image Example

Base64 Image Example

Base64 Image ``` ## In the above example- The `src`attribute of the `img`element contains the **Data URI** that represents the **Base64 encoded PNG** image. The [format](https://www.mindstick.com/forum/162083/how-to-convert-ost-files-into-pst-format) of the data URI is `data:[][;base64],`, where `` specifies the [media](https://www.mindstick.com/articles/44257/the-impact-of-social-media-on-lawsuits) type of the data (`image/png` in this case), and `` is Base64 image data which is encoded. > **Note** make sure [replace](https://answers.mindstick.com/qa/94270/when-should-i-replace-my-timing-belt) the src data from your actual base64 image [url](https://answers.mindstick.com/qa/30335/what-is-the-definition-of-url) ## [Output](https://www.mindstick.com/interview/34427/explain-the-output-in-angular)- ![How to display Base64 images in HTML](https://www.mindstick.com/mindstickarticle/c4323f02-c1b8-4748-a140-319ecb24792c/images/9a4aa8ed-0822-4d0f-bdb9-6b63a0ed0219.png) **Also, Read:** [What is the use of HTML Iframe?](https://www.mindstick.com/articles/336065/what-is-the-use-of-html-iframe) --- Original Source: https://www.mindstick.com/articles/336066/how-to-display-base64-images-in-html Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.