Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.
Blaze UI Image is an image component that provides a placeholder image if the source image is not provided. It is pretty useful when the source link is broken or the user couldn’t find the right image at the time. Also, the images are lazy-loaded, which means they don’t affect the performance. The images are provided by Unsplash.
Blaze UI Image attributes:
- src: This attribute is used to provide the URL source.
- alt: This attribute is used to provide alternative text to source URL.
- user: This attribute is used to provide username if there is no source URL and want to filter by username.
- filter: This attribute is used to filter by image tags like hills, cars, etc.
- likes: This attribute is a Boolean value that asks whether the selected photo is liked by the user-specified.
- width: This attribute is used to define the width of the image.
- height: This attribute is used to define the height of the image.
Syntax:
<blaze-image src="url"
width="640" height="480">
</blaze-image>Example 1: In the following example, we load an image from the src URL.
<!DOCTYPE html> <html lang="en">
<head>
<title>GeeksforGeeks | BlazeUI</title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Image attributes</strong>
<br />
</center>
<br />
<div style="width: 320px; height: 240px; margin: auto;">
<blaze-image src=
</blaze-image>
</div>
</div>
</body>
</html>
|
Output:
Blaze UI Image attributes
Example 2: In the following example, we will load theimage using alt text.
<!DOCTYPE html> <html lang="en">
<head>
<title>GeeksforGeeks | BlazeUI</title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Image attributes</strong>
<br />
</center>
<br />
<div style="width: 320px; height: 240px; margin: auto;">
<blaze-image width="640" height="480" filter="hills">
</blaze-image>
</div>
</div>
</body>
</html>
|
Output:
Blaze UI Image attributes
Reference: https://www.blazeui.com/objects/images/