Open In App

Blaze UI Images

Improve
Improve
Like Article
Like
Save
Share
Report

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 the 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. In this article, we will see Blaze UI Images. 

Blaze UI Images class:

  • o-image: This class is used to add the images to the webpage.

Syntax:

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

Example 1: Below example demonstrates the image object in Blaze UI.

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=
</head>
<body>
    <div class="o-container o-container--xlarge">
        <h1 style="color:green">GeeksforGeeks</h1>
  
        <h2>Blaze UI Images</h2>
        <img alt="random placeholder image" 
            class="o-image" src=
            style="width:300px;"
        />
    </div>
</body>
</html>


Output:

 

Example 2: Another example demonstrating the image object in Blaze UI.

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=
</head>
<body>
    <div class="o-container o-container--xlarge">
        <h1 style="color:green">GeeksforGeeks</h1>
  
        <h2>Blaze UI Images</h2>
        <img alt="random placeholder image" 
            class="o-image" 
            src=
            style="width:300px; border-radius:150px;"
        />
    </div>
</body>
</html>


Output:

 

Reference: https://www.blazeui.com/objects/images



Last Updated : 26 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads