SmartImage

An image component with more features and better defaults that next/image.

This should be used instead of next/image and <img> in all cases.

Notably, if you configured a basePath other than the root in next.config.js, this component will automatically prepend it to the src prop.

Props

The same as next/image component, as well as:

disableStrictCLS: Disables the Next.js CLS error. Particularly, this means you can not pass width and height even if the import is not static, and the component will behave like a normal <img> would. Note that this is frowned upon as it causes cumulative layout shift.

Examples

Image without given width

Note: this text will shift its position as soon as the image loads.

1  <Stack>
2    <SmartImage
3      disableStrictCLS
4      src="/logo.png"
5      alt="Logo"
6    />
7    <Paragraph box>
8      Note: this text will shift its position as soon as the image loads.
9    </Paragraph>
10</Stack>

1  <Stack>
2    <SmartImage
3      disableStrictCLS
4      src="/logo.png"
5      alt="Logo"
6    />
7    <Paragraph box>
8      Note: this text will shift its position as soon as the image loads.
9    </Paragraph>
10</Stack>

.css-1gf1up0{--Icon-fontSize:calc(1em * 1);margin:var(--Typography-margin, 0px);display:inline;font-size:var(--Typography-fontSize, inherit);display:inline;}.css-1gf1up0>.MuiTypography-endDecorator{display:none;}.css-1gf1up0:hover>.MuiTypography-endDecorator{display:inline;}SmartImage

Examples

Image without given width

See also

SmartImage