Summary 💡
Implement an enhanced version of the native <img> element.
Examples 🌈
import { Image } from '@material-ui/core';
<Image src="" />Motivation 🔦
A couple of features we could bring:
- Use
display: inline-block; to avoid layout jumps when the image is loading or broken.
- Provide a custom fallback component when the image fails to load.
- Support a loading indicator when the image takes too much time to load, e.g Skeleton.
- Add a smooth animation for displaying the image once loaded.
- Support a placeholder to display while image's loading. An image of lower resolution.
- Lazy loading? Maybe not relevant considering https://caniuse.com/#feat=loading-lazy-attr and https://web.dev/native-lazy-loading/.
- Support aspect ratio. For instance, it allows rendering an image with a width constraint without having to wait for the image to load over the networks to resolve its height (which might lead to a layout shift).
Benchmark
Summary 💡
Implement an enhanced version of the native
<img>element.Examples 🌈
Motivation 🔦
A couple of features we could bring:
display: inline-block;to avoid layout jumps when the image is loading or broken.Benchmark