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=
"https://unpkg.com/@blaze/css@12.2.0/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.
<!DOCTYPE html>
<html>
<head>
<title>Blaze UI</title>
<script type="module" src=
"https://unpkg.com/@blaze/atoms@13.1.0/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@13.1.0/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@12.2.0/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>
Output:
