> ## Documentation Index
> Fetch the complete documentation index at: https://docs.altoura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Show Image & Hide Image

> Display or hide image overlays in the training interface

## Overview

Use **Show Image** to display image overlays (diagrams, reference photos, safety warnings, instructional graphics) in the training interface. Use **Hide Image** to remove images when they are no longer needed.

## Show Image

### When to Use

* Display technical diagrams or schematics
* Show reference photos of correct procedures
* Present safety warning graphics
* Display instructional images alongside the 3D scene
* Show comparison photos (correct vs. incorrect)

### Parameters

| Parameter   | Type            | Required | Description                                                       |
| ----------- | --------------- | -------- | ----------------------------------------------------------------- |
| Image Asset | Asset Reference | Yes      | Select an image from your asset library (PNG, JPG, SVG supported) |

### Example: Safety Warning

```
Action: Show Image
Image Asset: "safety-hazard-icon"
```

A safety warning image appears in the training interface.

### Example: Procedure Reference

```
Action: Show Image
Image Asset: "valve-assembly-diagram"
```

A technical diagram showing the correct valve assembly is displayed to guide the learner.

## Hide Image

### When to Use

* Remove reference images after the learner has reviewed them
* Clear images before transitioning to the next step
* Reset UI state between training phases

### Parameters

| Parameter        | Type   | Required | Description                                                             |
| ---------------- | ------ | -------- | ----------------------------------------------------------------------- |
| Target Action ID | String | Optional | The ID of a specific Show Image action to hide. Omit to hide all images |

### Example: Hide All Images

```
Action: Hide Image
```

All image overlays disappear.

### Example: Hide Specific Image

```
Action: Hide Image
Target Action ID: "reference-diagram-step-2"
```

Only the image with ID `reference-diagram-step-2` is hidden. Other images remain visible.

## Best Practices

<Steps>
  <Step title="Use high-quality images">
    Provide clear, high-resolution images for technical diagrams and reference photos.
  </Step>

  <Step title="Optimize file sizes">
    Compress images to reduce training file size and improve loading times.
  </Step>

  <Step title="Show in onEntry, hide in onExit">
    Display images in **onEntry** and remove them in **onExit** for clean state transitions.
  </Step>

  <Step title="Combine with text">
    Pair **Show Image** with **Show Text** for instructions + visual reference.
  </Step>

  <Step title="Test on mobile">
    Verify images are visible and properly positioned on small screens.
  </Step>
</Steps>

## Common Patterns

### Instruction + Diagram

```
State: ComponentAssembly
  onEntry:
    → Show Image (assembly-diagram)
    → Show Text "Follow the diagram. Connect the green wire first."
    → Show Panel (with instructions)

  onExit:
    → Hide Image
    → Hide Text
```

The learner sees a diagram, text instructions, and a detailed panel — all working together.

### Safety Warning Before Procedure

```
State: DangerousProcedure
  onEntry:
    → Show Image (warning-icon)
    → Pause Training (learner must dismiss)
    → Show Text "This step involves high voltage. Follow all safety procedures."
    → Show Panel (safety checklist)
```

The warning appears first, then the learner must acknowledge before proceeding.

## Related Actions

* **Show Text** — Display text instructions alongside images
* **Show Panel** — Combine images with text, buttons, and interactive elements