Blaze UI Input Images

Last Updated : 19 Aug, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
<body> 
    <center> 
    <div class="o-container o-container--xlarge"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
  
        <h2>Blaze UI Images</h2> 
        <img alt="random placeholder image"
            class="o-image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
            style="width:300px;"
        /> 
    </div> 
    </center> 
</body> 
</html> 

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Blaze UI</title> 
      
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule=""    src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
  
    <style> 
        .Logo { 
            color: green; 
        } 
        body{ 
            background-color:lightgreen; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="Logo"> 
            GeeksforGeeks 
        </h1> 
        <h3>Blaze UI File Upload</h3> 
        <blaze-file-upload drop multiple> 
            Upload file 
        </blaze-file-upload> 
    </center> 
</body> 
</html> 