Image Node
The Image Node allows you to upload and store images within your workflow. It serves as an image source that can provide image data to other nodes such as Display Image, AI vision models, image processing nodes, or any node that accepts image inputs. The Image node makes it easy to include static images in your flows without requiring external hosting.
Basic Usage
Use the Image Node to upload and store an image that will be passed as input to other nodes for display, analysis, or processing.
Inputs
The Image node does not accept inputs from other nodes. It serves as a source node that provides image output to subsequent nodes.
Outputs
Output (Pink Port)
Image Data: Outputs the uploaded image as image data.
- Connects to pink input ports of other nodes (image-compatible nodes)
- Passes the image file/URL to connected nodes
- Can connect to multiple nodes simultaneously
- Image data includes file reference or URL
Configuration
Image Upload Area
Upload Interface: Central area displaying the uploaded image with preview and removal option.
Features:
- Click to Upload: Click the area to open file browser
- Drag and Drop: Drag image files directly onto the node
- Image Preview: Shows thumbnail of uploaded image
- Remove Button: Red "Remove Image" button to delete the uploaded image
Supported Formats:
- JPEG/JPG
- PNG
- GIF
- WebP
- SVG (in some cases)
- Other common image formats
File Size:
- Check platform limits (typically several MB)
- Larger images may take longer to upload
- Consider optimizing very large images
Example Workflows
Simple Image Display
Scenario: Upload an image and display it to users.
Steps to Create the Flow:
-
Add a Start Node.
-
Add an Image Node:
i. Upload an image:
- Click the upload area in the Image node
- Select an image from your computer (e.g., an AI robot image)
- The image appears as a preview in the node
ii. Preview and verify:
- Check that the correct image is displayed
- If needed, click "Remove Image" to replace it
- Upload a different image if necessary
-
Add a Display Image node:
- Connect: Image node Output (pink) → Display Image Input (pink)
-
Connect flow control:
- Start → Display Image (red to red)
Preview:
[Start] → [Display Image]
↑ (Image from Image Node)
→ User sees the uploaded image
Result: Users see the uploaded image displayed when the flow runs. In this example, a futuristic AI robot image is shown.
Related Nodes
- Display Image: Displays the image to users (receives from Image node)
- Describe Image: AI analyzes images (receives from Image node)
- AI General Prompt: Can process image descriptions
- Display Text: Provides context for images
- Display HTML: Alternative for displaying images with HTML
- Knowledge Bank: Can store image URLs for reference
- File Uploader: For user-uploaded images (different from Image node)
Image Node vs Other Image Approaches
| Feature | Image Node | File Uploader | Display HTML (img) |
|---|---|---|---|
| Purpose | Static workflow images | User uploads images | Display external images |
| Upload By | Flow creator | End users | Reference URL |
| Storage | In workflow | Temporary/storage | External hosting |
| Use Case | Teaching materials | Student submissions | External resources |
| Reusability | Same image every run | Different each time | URL-based |
| Configuration | Upload once | Runtime upload | URL configuration |
Summary
The Image Node is essential for incorporating visual content into your workflows:
✓ Simple: Easy upload and management
✓ Flexible: Works with multiple image formats
✓ Integrated: Stored within workflow
✓ Visual: Preview uploaded images
✓ Reusable: One image, multiple connections
Master the Image node to create visually rich, engaging learning experiences and workflows with static images that enhance understanding and engagement.