Add PlaceholderImage component

[craigpalermo]

Description

In order to create demos for image-related components in Storybook, we'd like to create a new component responsible for loading and rendering an image of a specified height and width. It would also be nice to support blurred images, for example, to demonstrate components that lazy-load images.

After reviewing a few possible placeholder image services, the following seem to satisfy our requirements:

• PlaceIMG
• Lorem Picsum
• Fill Murray
• Placekitten

Requirements

• Randomly selects a service from the above list each time it loads an image
• Accepts a boolean prop named blur
  • In this case, the component should retrieve its image from Lorem Picsum (the only service of the above that supports blur).
• Accepts numeric height and width props to specify pixel dimensions of image
• Should load a new image when any of the height, width, or blur props change (not on every component update)

[ael-mas]

I'd like to work on this issue

[craigpalermo]

Thanks for volunteering @ael-mas! One thing I want to note before you get started is to try to avoid using any of the legacy lifecycle methods when updating the image, handling prop changes, etc.

[dansternfeld1]

Randomly selects a service from the above list each time it loads an image

Random should be the default, but you should be able to pick as well

Also, it'd be neat if it could export the image URL for use in existing components

[tfquirk]

#554 Creates a PlaceholderImage component in packages/src.

[tfquirk]

PR merged. Closing issue.