The psammead-image-placeholder component has two placeholders available. The default is a div with a base-64 encoded SVG background image that depicts the BBC logo. The component accepts a ratio as a prop. In the Psammead component library, Image Placeholder is used within the psammead-figure component.
The alternative is an AMP supported placeholder which uses the same base-64 encoded SVG but as multiple amp-img components, which are loaded based on the current screen size. The component adheres to the parent amp-img size and functions as both a fallback and placeholder. See the AMP documentation on fallbacks and placeholders.
Psammead Image Placeholder is designed to appear as a temporary stand-in to be replaced by an actual image, for example in the case of lazy loading.
npm install @bbc/psammead-image-placeholder
The ImagePlaceholder component is expected to contain an image as a child element.
import ImagePlaceholder from '@bbc/psammead-image-placeholder';
const WrapperComponent = ({
ratio,
}) => (
<ImagePlaceholder ratio={ratio}>
<img src="http://some-image.url">
</ImagePlaceholder>
);The ImagePlaceholderAmp component is expected to be used as a child element of an amp-img component. Information about amp-img can be found on the AMP documentation website
import ImagePlaceholderAmp from '@bbc/psammead-image-placeholder';
const WrapperComponent = () => (
<amp-img
src="http://some-image.url"
width="645px"
height="128px"
>
<ImagePlaceholderAmp />
</amp-img>
);| Argument | Type | Required | Default | Example |
|---|---|---|---|---|
| Ratio | Number, ratio between height and width | Yes | N/A | 65.625 |
| darkMode | Bool, true (dark) or false (normal) | No | false | false |
| forwardStyle | Styling object that applies additional styling | No | null | { background: 'none' } |
| Argument | Type | Required | Default | Example |
|---|---|---|---|---|
| darkMode | Bool, true (dark) or false (normal) | No | false | false |
As a div with a background image or as an amp-img for it's AMP counterpart, Psammead Image Placeholder is a presentational element without semantic meaning. As such it does not need to meet colour contrast requirements.
Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.
We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.
Psammead is Apache 2.0 licensed.