Image

import { ImageDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Image);

Usage

Image is a wrapper for img with minimal styles. By default, the image will take 100% of the parent width. The image size can be controlled with w and h style props.

Image height

In most cases, you will need to set the image height to prevent layout jumps when the image is loading. You can do so with the h style props.

Image fit

By default the image has object-fit: cover style - it will resize to cover the parent element. To change this behavior, set w="auto" and fit="contain" props.

Fallback image

Set the fallbackSrc prop to display a fallback image when the image fails to load:

Usage with Next.js Image

The Image component is a polymorphic component, its root element can be changed with the component prop. You can use it with next/image and other similar components.

import NextImage from 'next/image';
import { Image } from '@mantine/core';
import myImage from './my-image.jpg';

function Demo() {
  return <Image component={NextImage} src={myImage} alt="My image" />;
}