Image

<Image />

A component that takes an endpoint from American Public Media's internal image API and turns it into a valid <img /> object with a srcset and proper sizing. It can also be given a srcset and/or src manually via the fallback props. For example, this:

import { Image } from '@apmg/mimas'
import { imageData } from './data/image'

<Image image={ imageData } aspectRatio='widescreen' />

Would produce the following image:

<img class="" src="https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/uncropped/f5db37-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg" alt="Serena Brook opens our show at The Town Hall" srcset="https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/e428bc-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 400w,https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/58b2ba-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 600w,https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/95c885-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 1000w,https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/b3a373-20181220-serena-brook-opes-our-show-at-the-town-hall.jpg 1400w,https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/6ceb83-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 2000w">

Most of the logic that parses the image data to either find or generate the required image information can be found on the utils page.

Props

image

A JSON endpoint from APM's Image API. If formatted as expected, this component will create the src, srcset, sizes, alt text, and aspect ratio.

aspectRatio

Allows you to manually select one of the aspect ratios provided in the image endpoint. Can only be used if the image property data is provided and valid. Accepts one of the following strings:

• normal
• square
• thumbnail
• widescreen
• portrait
• uncropped

fallbackSrcSet

Accepts a srcset string and overrides any srcset generated from the image prop (if applicable).

fallbackSrc

Accepts a URL string and overrides any src set by the image prop (if applicable).

alt

Accepts a string and overrides any alt phrase set by the image prop (if applicable).

sizes

Accepts a string and overrides any sizes attribute set by the image prop (if applicable).