Components
Course imagery and asset normalization
Use the real cover/avatar assets and the shared normalization boundary rather than a second image pipeline.
On this page
Purpose and usage
Use the real cover/avatar assets and the shared normalization boundary rather than a second image pipeline.
Anatomy
| Part | Contract |
|---|---|
| Input | String or static image import |
| Normalization | String source passes through ensureAssetHost |
| Render | Next Image receives remaining props |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| ImageProps | Existing Next Image API forwarded |
| Cover | CourseCard uses fill and aspect-video parent |
| Provider logo | Connection panel uses contain treatment |
State coverage
| State | Implemented behavior |
|---|---|
| Loaded | Actual normalized source |
| Missing source | Owning component chooses fallback |
| Failed request | Must be inspected, not silently replaced with invented artwork |
Interaction and composition
- Use object-cover for a cover, object-contain for a provider logo.
- Preserve intrinsic ratio in documentation images.
- Review alt text in the owning component.
- Keep actual source image dimensions separate from screenshot dimensions.
Accessibility and readiness
Host normalization does not itself prove file accessibility or safety. Captures allow only GET asset/font/video requests and local mocked APIs. Do not claim B2 write, upload or provider reliability was tested.
Source references
| File | Responsibility |
|---|---|
| src/components/AssetImage.tsx | Next Image wrapper |
| src/utils/asset-url.ts | Host normalization |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1