This component is the workhorse of Pinterest. If you define Pinterest to be all
about collecting ideas, then images are how we choose to represent those ideas.
In response, we've added a few extra superpowers to the regular
<img> tag to
make it even more awesome.
One thing that might be unusual is that the
width and the
height of the
component are required, yet the image will scale to the size of its container.
This is so that the placeholder's size can be calculated before the image has
While the exact dimensions supplied aren't used (only the ratio between them is
considered), you should always try to try to supply the exact dimensions of the
source image requested.
The color you pass into
Image will be used to fill the placeholder that shows up
as an image loads. The example shown has an empty
src prop provided so it remains
You can overlay content on an Image by passing it children.
In some cases, you may want to scale an image to fit into its container.
To achieve that, you can set
fit to either
"contain", depending on the effect you wish to achieve.
"contain": This makes it so that the image is "contained" within its container. This means that the image is resized appropriately
such that the entire image can fit in the container, while maintaining its aspect ratio (think letterbox);
<Image alt="..." color="#000" fit="contain" src="..." />
"cover": This does the opposite of
"contain" and tries to scale the image as large as possible so that the entire container is occupied,
while maintaining the aspect ratio of the image.
<Image alt="..." color="#000" fit="cover" src="..." />
- When using
naturalWidthare ignored since the aspect ratio is handled by the browser.
- In order for
"contain"to work properly, the container must have some sort of implicit height.
Square content: contain vs cover
Wide content: contain vs cover
Tall content: contain vs cover
You can delay loading images that are off-screen with the loading attribute.
Presentational Images with Role
Sometimes Images are purely presentational. For example, an Image used above an article title may be used to draw people's attention visually, but doesn't add any additional information or context about the article. In this case, the
role should be set to "presentation" in order to inform screen readers and other assistive technology that this image does not need alternative text or any additional label.