Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Images are an essential part of the website which helps in various things like marketing, etc. The image component doubles up as a placeholder image if a specific source isn’t provided. The images are also lazy-loaded once they come into view. 

We can insert images in two major ways:

• By using the <img> element: This element will help us to insert images into the webpage.
• By using the upload class: This class is used to upload any kind of file or image to the webpage.

Syntax:

•  For inserting image through <img> element.

<img alt="alternate text" class="o-image" src="http:/" />

Syntax:

•  For inserting images through the upload class.

<blaze-file-upload ...>
  ...
</blaze-file-upload>

Example 1: In the below code, we will insert an image through the <img> element.

Output:

 

Example 2: In the below code, we will make use of the upload class to insert an image.

Output: