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.
<!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 =
</ 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 =
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.
<!DOCTYPE html> < html >
< head >
< title >Blaze UI</ title >
< script type = "module" src =
</ script >
< script nomodule = "" src =
</ script >
< link rel = "stylesheet" href =
< 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 >
|
Output: