Image resource loading: element support #75

Phase 8 — Resource Loading + Character Encoding + Real Page Loading#

Implement loading and rendering of images referenced by <img> elements.

Requirements#

• After HTML parsing, scan the DOM for <img src="..."> elements
• Resolve src attribute against the document's base URL
• Fetch image data using the ResourceLoader
• Detect image format from Content-Type header or magic bytes (PNG: 89 50 4E 47, JPEG: FF D8, GIF: GIF87a/GIF89a)
• Decode using the appropriate image crate decoder (PNG, JPEG, GIF)
• Store decoded Image (RGBA8) associated with the DOM element for use during layout and rendering
• Handle width and height attributes (intrinsic dimensions)
• Handle alt text (display text when image fails to load)
• Graceful handling of failed/missing images (show alt text or broken image indicator)

Integration Points#

• html crate: extract <img> elements from DOM
• url crate: resolve relative URLs
• image crate: decode PNG, JPEG, GIF
• layout crate: use image dimensions for layout (replaced element)
• render crate: paint decoded image pixels

Acceptance Criteria#

• Images are fetched and decoded from URLs
• PNG, JPEG, and GIF formats are detected and decoded
• Image dimensions are available for layout
• Failed image loads show alt text or placeholder
• width/height attributes override intrinsic dimensions
• No external dependencies, no unsafe
• Unit tests for format detection and dimension handling

Dependencies#

Depends on: Resource loader, image crate decoders (already complete)