How to use bpk-component-image - 6 common examples
To help you get started, we’ve selected a few bpk-component-image examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Skyscanner / backpack / packages / bpk-docs / src / pages / WebImagesPage / WebImagesPage.js View on Github 
BpkBackgroundImage,
withLazyLoading,
withLoadingBehavior,
} from 'bpk-component-image';
import BpkText from 'bpk-component-text';
import imagesReadme from 'bpk-component-image/README.md';
import * as SPACINGS from 'bpk-tokens/tokens/base.es6';
import * as BREAKPOINTS from 'bpk-tokens/tokens/breakpoints.es6';
import DocsPageBuilder from '../../components/DocsPageBuilder';
const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingImage = withLoadingBehavior(BpkImage);
const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
const FadingLazyLoadedImage = withLoadingBehavior(
withLazyLoading(BpkImage, documentIfExists),
);
const image1 =
'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg';
const image2 =
'https://content.skyscnr.com/8bd0d1b67b1bda63e5567a4c402402f2/iceland.jpg';
const image3 =
'https://content.skyscnr.com/200946ddb82b7c026e6e186a7037b1f8/machu-picchu.jpg';
const image4 =
'https://content.skyscnr.com/8a8ac17b591b61e6fe5d8f63414561cd/amsterdam-the-netherlands.jpg';
const image5 =
'https://content.skyscnr.com/6c8f0e633bde70798a9d6f0a26cb6016/andalsnes-norway.jpg';
const components = [
{
id: 'default',import React from 'react';
import BpkImage, {
BpkBackgroundImage,
withLazyLoading,
withLoadingBehavior,
} from 'bpk-component-image';
import BpkText from 'bpk-component-text';
import imagesReadme from 'bpk-component-image/README.md';
import * as SPACINGS from 'bpk-tokens/tokens/base.es6';
import * as BREAKPOINTS from 'bpk-tokens/tokens/breakpoints.es6';
import DocsPageBuilder from '../../components/DocsPageBuilder';
const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingImage = withLoadingBehavior(BpkImage);
const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
const FadingLazyLoadedImage = withLoadingBehavior(
withLazyLoading(BpkImage, documentIfExists),
);
const image1 =
'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg';
const image2 =
'https://content.skyscnr.com/8bd0d1b67b1bda63e5567a4c402402f2/iceland.jpg';
const image3 =
'https://content.skyscnr.com/200946ddb82b7c026e6e186a7037b1f8/machu-picchu.jpg';
const image4 =
'https://content.skyscnr.com/8a8ac17b591b61e6fe5d8f63414561cd/amsterdam-the-netherlands.jpg';
const image5 =
'https://content.skyscnr.com/6c8f0e633bde70798a9d6f0a26cb6016/andalsnes-norway.jpg';
const components = [import React from 'react';
import PropTypes from 'prop-types';
import BpkText from 'bpk-component-text';
import BpkPanel from 'bpk-component-panel';
import { cssModules } from 'bpk-react-utils';
import BpkImage, {
withLazyLoading,
withLoadingBehavior,
} from 'bpk-component-image';
import STYLES from './ComponentScreenshots.scss';
const getClassName = cssModules(STYLES);
const documentIfExists = typeof window !== 'undefined' ? document : null;
const LazyLoadingImage = withLoadingBehavior(
withLazyLoading(BpkImage, documentIfExists),
);
let counter = 0;
const generateId = (title = '') => {
counter += 1;
return `${title.toLowerCase().replace(' ', '-')}-${counter}`;
};
const ComponentScreenshot = ({ title, subText, ...rest }) => {
const subTextId = generateId(title);
return (
<div></div>import React from 'react';
import BpkImage, {
BpkBackgroundImage,
withLazyLoading,
withLoadingBehavior,
} from 'bpk-component-image';
import BpkText from 'bpk-component-text';
import imagesReadme from 'bpk-component-image/README.md';
import * as SPACINGS from 'bpk-tokens/tokens/base.es6';
import * as BREAKPOINTS from 'bpk-tokens/tokens/breakpoints.es6';
import DocsPageBuilder from '../../components/DocsPageBuilder';
const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingImage = withLoadingBehavior(BpkImage);
const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
const FadingLazyLoadedImage = withLoadingBehavior(
withLazyLoading(BpkImage, documentIfExists),
);
const image1 =
'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg';
const image2 =
'https://content.skyscnr.com/8bd0d1b67b1bda63e5567a4c402402f2/iceland.jpg';
const image3 =
'https://content.skyscnr.com/200946ddb82b7c026e6e186a7037b1f8/machu-picchu.jpg';
const image4 =
'https://content.skyscnr.com/8a8ac17b591b61e6fe5d8f63414561cd/amsterdam-the-netherlands.jpg';
const image5 =
'https://content.skyscnr.com/6c8f0e633bde70798a9d6f0a26cb6016/andalsnes-norway.jpg';import React from 'react';
import PropTypes from 'prop-types';
import BpkText from 'bpk-component-text';
import BpkPanel from 'bpk-component-panel';
import { cssModules } from 'bpk-react-utils';
import BpkImage, {
withLazyLoading,
withLoadingBehavior,
} from 'bpk-component-image';
import STYLES from './ComponentScreenshots.scss';
const getClassName = cssModules(STYLES);
const documentIfExists = typeof window !== 'undefined' ? document : null;
const LazyLoadingImage = withLoadingBehavior(
withLazyLoading(BpkImage, documentIfExists),
);
let counter = 0;
const generateId = (title = '') => {
counter += 1;
return `${title.toLowerCase().replace(' ', '-')}-${counter}`;
};
const ComponentScreenshot = ({ title, subText, ...rest }) => {
const subTextId = generateId(title);
return (import BpkImage, {
BpkBackgroundImage,
withLazyLoading,
withLoadingBehavior,
} from 'bpk-component-image';
import BpkText from 'bpk-component-text';
import imagesReadme from 'bpk-component-image/README.md';
import * as SPACINGS from 'bpk-tokens/tokens/base.es6';
import * as BREAKPOINTS from 'bpk-tokens/tokens/breakpoints.es6';
import DocsPageBuilder from '../../components/DocsPageBuilder';
const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingImage = withLoadingBehavior(BpkImage);
const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
const FadingLazyLoadedImage = withLoadingBehavior(
withLazyLoading(BpkImage, documentIfExists),
);
const image1 =
'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg';
const image2 =
'https://content.skyscnr.com/8bd0d1b67b1bda63e5567a4c402402f2/iceland.jpg';
const image3 =
'https://content.skyscnr.com/200946ddb82b7c026e6e186a7037b1f8/machu-picchu.jpg';
const image4 =
'https://content.skyscnr.com/8a8ac17b591b61e6fe5d8f63414561cd/amsterdam-the-netherlands.jpg';
const image5 =
'https://content.skyscnr.com/6c8f0e633bde70798a9d6f0a26cb6016/andalsnes-norway.jpg';
const components = [
{
