Image

The Image component is designed to render image assets in your UI, utilizing the img HTML element internally.

Usage

To render an image asset in your UI, use the Image component as follows:

1. First, import the asset into your file:

import MyImage from '../../assets/my-image.png';

2. Then, render the image using the Image component by setting its src attribute:

<Image src={MyImage} />

And the full example:

import Image from '@components/Media/Image/Image';
import MyImage from '../../assets/my-image.png';

const App = () => {
    return (
        <Image src={MyImage} style={{ width: '150px', height: '150px' }} />
    );
};

export default App;

Applying styles to the component

To style the image through the Image component, you can use either the class or style attribute.

For inline styles, pass an object with the desired properties. For example, you can set the width and height of the image as shown here.

However, using the class attribute is recommended for better performance. To use the class attribute, create a CSS file defining the image styles and apply them to the Image component:

MyImage.module.css:

.my-image {
    width: 150px;
    height: 150px;
}

import Image from '@components/Media/Image/Image';
import MyImage from '../../assets/my-image.png';
import styles from './MyImage.module.css';

const App = () => {
    return (
        <Image src={MyImage} class={styles['my-image']} />
    );
};

export default App;

Fill the container

To make the Image component fill its container, set the fill property to true. This will apply styles to ensure the image occupies the entire space of its parent element. This prop is useful when you want the image to just adapt to the size of its container.

import Image from '@components/Media/Image/Image';
import MyImage from '../../assets/my-image.png';

const App = () => {
    return (
        <div style={{ width: "10vmax", height: "10vmax" }}>
            <Image fill src={MyImage} />
        </div>
    );
};

export default App;