Skip to main content
Skip table of contents

Image

Overview

Image displays an image with preview and transformation options. A component allows displaying of different types of images, including network images, static resources, temporary local images, and images from local disks, such as the camera roll.

Please refer to this for more information: https://mui.com/material-ui/react-image-list/.

Import

CODE
import { Image } from '@mui/material'

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name

Default

Description

Id-name

Placeholder: <id-name>

The Id-name of the created component.

State

State: Normal

The State of the created Component.

Margin and Padding

Size Unit: Px

The component Margin and Padding with many selectable Size Units.

Size

Size Unit: Px

The component Size of includes Width and Height with many selectable Size Units.

Layout

Position: None

Size Unit: Px

The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.

Source

Alternative Text: Image

The component Source includes Path and Alternative Text.

General

Visibility: None

Opacity: 100%

The component General includes Visibility, Opacity, and Background.

Advanced Style

The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE
<img
              alt="Image1"
          sx={{':focus': {'margin': '15px 10px 10px 15px','padding': '15px 25px',
              'width': '150px','height': '200px',
              'position': 'absolute','top': '15px','right': '15px','bottom': '10px','left': '10px',
              'visibility': 'hidden',
              'opacity': 0.49,
              'backgroundColor': '#d58888ff',},}}
               src={Icon800pxSignCheckIconCopy1}/>

 

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.