Components
Images and asset boundaries
Native image behavior with safe, coherent demonstration media.
On this page
Purpose and composition
AssetImage normalizes asset hosts before using Next Image. Covers, avatars, resource files, and embedded media have different delivery responsibilities.
Anatomy
- Course cover
- Avatar or fallback
- Provider logo
- Lesson poster
- Download resource
Configuration and variants
| Input or variant | Contract |
|---|---|
| AssetImage | Pass image source and normal image props; host normalization is internal. |
| Cover ratio | Course cards preserve 16:9; public media uses its source wrapper. |
| Fallbacks | Use existing placeholders when a source image is absent. |
States and feedback
All capture media is local or intercepted. Sample course covers do not reveal customer uploads, and offline media does not claim playback validation.
Interaction and responsive behavior
Preserve source aspect ratios and meaningful crops. Do not stretch screenshots or invent replacement app controls.
Accessibility and known limits
Provide meaningful alternatives for informative images and empty alternatives for decoration. Inspect broken images and native font loading before accepting a capture.
Source references
| File | Responsibility |
|---|---|
| src/components/AssetImage.tsx | Asset normalization wrapper |
| src/utils/asset-url.ts | Asset host handling |
| src/components/CourseCard.tsx | Cover treatment |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0