Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add Image component

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

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

Issue Analytics

State:
Created 3 years ago
Reactions:34
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

eps1loncommented, Sep 6, 2020

I don’t think we can implement meaningful features since the most important ones rely on the build setup. A meta framework is far better suited to host such a component. There’s a RFC in nextjs which has far better research and highlights why this component should leverage the build setup: https://github.com/vercel/next.js/discussions/16832

1reaction

oliviertassinaricommented, Sep 6, 2020

@xiaoyu-tamu It reminds me of one of the reasons why we didn’t call Typography: Text. In hindsight, it didn’t seem to have stopped a lot of component libraries from using this wording:

As long as you have eslint or TypeScript, it should be fine:

Otherwise, it’s a nightmare:

The other reason we have kept Typography was to match the theme.typography structure. But we could also argue that using two different names would reduce confusion 🤔.

Top Results From Across the Web

Image - React Native

A React component for displaying different types of images, including network images, static resources, temporary local images, and images ...

Add Image component to new gameobject - Stack Overflow

1.Create a Canvas. The includes creating the GameObject that will hold the Canvas then attach Canvas component to it. · 2.Create your Image...

next/image - Next.js

The <Image /> component accepts a number of additional properties beyond those which are required. This section describes the most commonly-used properties of ......

Adding Images, Fonts, and Files - Create React App

Adding Images, Fonts, and Files. With webpack, using static assets like images and fonts works similarly to CSS.

Image Component | Adobe Experience Manager

The Image Component features adaptive image selection and responsive behavior with lazy loading for the page visitor as well as easy image ......