BlogMediaImage

Blog-optimized responsive image: renders raster sources through next/image and SVG sources as a plain img, with a fill mode (cover/contain fit) and a fluid full-bleed mode for raster images.

Status: stable. Group: media. Markdown version: /design-system/components/blog-media-image.md

When to use

Responsive article image sized for the blog's prose measure. Renders raster sources through next/image and SVG sources as a plain img. Use inside article bodies instead of a raw img.

When not to use

Do not use a raw <img> in article bodies; this component handles SVG, external and sizing concerns.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

BlogMediaImage props
Prop	Type	Default	Description	Required
`src`	`string`	none	No description in the contract.	Yes
`alt`	`string`	none	No description in the contract.	Yes
`fill`	`boolean`	none	No description in the contract.	No
`width`	`number`	none	Intrinsic width. Raster images without fill fall back to 800 when omitted; SVG sources pass it through as the width attribute.	No
`height`	`number`	none	Intrinsic height. Raster images without fill fall back to 400 when omitted; SVG sources pass it through as the height attribute.	No
`className`	`string`	none	No description in the contract.	No
`priority`	`boolean`	`false`	No description in the contract.	No
`sizes`	`string`	none	No description in the contract.	No
`onLoad`	`() => void`	none	No description in the contract.	No
`onError`	`() => void`	none	No description in the contract.	No
`fit`	`"cover" \| "contain"`	`cover`	Object fit in fill mode only: contain for diagram heroes, cover (the default) for photos. Ignored when fill is not set.	No
`fluid`	`boolean`	`false`	Raster images without fill only: when true the image spans its container (no max-width cap from the width prop). SVG sources and fill mode ignore it.	No

Variants

Available fits: cover, contain (default cover).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

BlogMediaImage rules
Level	Rule	How it is checked
MUST	ARIA: Requires meaningful alt text; decorative uses should pass an empty alt.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not invent parallel primitives inside this folder.	Release review; not machine-checked.

Install and import

In-repo only. BlogMediaImage is not exported from @digitaltableteur/react, so there is no public import path.