Skip to content
ReferenceAdvancedShow images from a URL, file, Picture, or bytes.

Image

Group: Media

Description

An Image shows a picture on the page. The picture can come from a web address, an image file next to your program, a Picture value in state, or raw bytes. A bare Picture in a content list already displays itself; use the Image wrapper when you want size control or alt text.

Syntax

Image(url)
Image(url, width, height)

Parameters

Parameter Type Default Meaning
url str, Picture, bytes, or PIL image required The image source. Strings are web addresses or local file names.
width int image's own Display width in pixels.
height int image's own Display height in pixels.

The alt attribute sets the text description (Image("ada.png", alt="Ada the corgi mid-zoom")).

Examples

from drafter import *


@route
def index() -> Page:
    swatch = Picture.new(120, 80, "cadetblue")
    return Page([
        Header("Gallery of One"),
        Image(swatch, alt="A calm blue rectangle"),
        "\nThe same picture, small: ",
        Image(swatch, 30, 20, alt="The same rectangle, tiny")
    ])


start_server()

Notes

  • Sizing here is display-only: Image(pic, 30, 20) changes how large the picture appears without changing its pixels; pic.scale(...) actually resizes it.
  • Local file names work in development, but keep working after deployment only if the file ships with the site; see works locally, 404s deployed.
  • URL images require the visitor to be online, and the address must point directly at an image file.
  • A width and height that do not match the picture's proportions will stretch it. Give only one of the two, or keep the pair in proportion, unless the distortion is intentional.

Accessibility

Every meaningful image deserves alt text describing what it shows, not that it is an image ("Ada asleep on the keyboard", not "photo"). Purely decorative images can use alt="" so screen readers skip them.

  • Picture: the value type behind most images.
  • Use pictures: a how-to guide for working with pictures.
  • Camera: captures images from the visitor's camera.