Skip to main content

Display Image

The Display Image node shows images to users during workflow execution. It receives image data from Image nodes or other image sources and renders them in the user interface. This node is essential for presenting visual content such as diagrams, photos, illustrations, charts, or any educational imagery to enhance learning experiences and user engagement.

Display Image

Basic Usage​

Use the Display Image node to show images to users that are provided by Image nodes or other image-generating nodes in your workflow.

Inputs​

Input (Pink Port)​

Image Data: Accepts image data from connected nodes.

  • Connects to pink output ports of image-providing nodes
  • Receives image file or URL reference
  • Can display images from Image nodes, AI-generated images, uploaded images, etc.
  • Required to have an image source connected

Outputs​

The Display Image node does not produce outputs that are passed to subsequent nodes. It serves as an endpoint for displaying images to users.

However, it does have a red output port for flow control:

Output (Red Port)​

Flow Control: Continues execution to the next node after image is displayed.

  • Connects to red input ports of subsequent nodes
  • Allows workflow to continue after image is shown
  • Standard flow progression connection

Configuration​

The Display Image node operates without configuration parameters. It automatically displays whatever image is provided through its input connection.

Display Behavior​

  • Automatic Display: Image appears when node is reached in flow execution
  • Responsive: Adjusts to screen size
  • Full Image: Displays complete image as provided
  • No User Interaction Required: Image displays automatically

Example Workflows​

Simple Image Display​

Scenario: Upload an image and display it to users.

Display Image Example

Steps to Create the Flow:

  1. Add a Start Node.

  2. Add an Image Node:

    • Click to upload an image
    • Select an image file (e.g., a futuristic AI robot image)
    • Preview appears in the Image node
    • Verify correct image is uploaded

  3. Add a Display Image node:

    i. Connect the image:

    • Image node Output (pink) → Display Image Input (pink)

  4. Connect flow control:

    • Start → Display Image (red to red)

Preview:

[Start] → [Display Image]
              ↑ (Image from Image node)
       → User sees the uploaded image

Result: When the flow runs, users see the uploaded image displayed on their screen. In this example, a futuristic AI robot with glowing blue elements is shown.

  • Image: Provides image data to Display Image (source node)
  • Generate Image: AI-generated images for Display Image
  • Display Text: Provides context and explanations for images
  • Display HTML: Alternative for complex image layouts
  • Describe Image: AI analyzes images
  • Image Input: User-uploaded images (can be displayed)
  • Progress Checkpoint: Mark completion after viewing images

Summary​

The Display Image node is essential for visual content presentation:

✓ Simple: No configuration needed
✓ Automatic: Displays images seamlessly
✓ Flexible: Works with any image source
✓ Responsive: Adapts to screen sizes
✓ Essential: Core component for visual learning

Master the Display Image node to create visually rich, engaging educational experiences that enhance understanding through imagery and visual learning.