Image

Image with optional fallback

Polymorphic

Polymorphic component

Source

LLM docs

Docs

PackageIcon

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.

import { Image } from '@mantine/core';

function Demo() {
  return (
    <Image
      radius="md"
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png"
    />
  );
}

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.

import { Image } from '@mantine/core';

function Demo() {
  return (
    <Image
      radius="md"
      h={200}
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-10.png"
    />
  );
}

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.

import { Image } from '@mantine/core';

function Demo() {
  return (
    <Image
      radius="md"
      h={200}
      w="auto"
      fit="contain"
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-9.png"
    />
  );
}

Fallback image

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

import { Image } from '@mantine/core';

function Demo() {
  return (
    <Image
      radius="md"
      src={null}
      h={200}
      fallbackSrc="https://placehold.co/600x400?text=Placeholder"
    />
  );
}

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" />;
}

ColorSwatch

Indicator