> For the complete documentation index, see [llms.txt](https://docs.diaflow.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.diaflow.io/studio/nodes/outputs-apps/image-output.md).

# Image output

Show images returned by your workflow in your app.

Image output displays an image from an earlier node inside your app.

Use it when your workflow creates or returns an image that users should view.

<figure><img src="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2FGNLcXJR0n1za1Q322pfN%2FImage.png?alt=media&amp;token=1276eb92-7681-4920-b93f-b53836b231de" alt=""><figcaption></figcaption></figure>

### Before you start

Choose a field from an earlier node that returns an image.

<figure><img src="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2FLGZd0lTSkXUvYsSLIMoj%2Frounded-image%20(3).png?alt=media&amp;token=ccd3ffd2-3ce7-4a25-840e-fb1926ed5c72" alt="" width="375"><figcaption></figcaption></figure>

### How to set it up

1. In the **Output** node, click **+ Add**.
2. Select an image field from the list of earlier nodes.
3. Click **Ok**.
4. Choose **Image** as the output type.
5. Enter a clear **Title**.
6. Click **Ok** and test the flow.

<figure><img src="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2Fxqn1Vbc9TkQgnvaxsS3O%2Frounded-image%20(6).png?alt=media&amp;token=b849c27e-8d70-47d2-a0b5-661ade810eef" alt="" width="351"><figcaption></figcaption></figure>

### Settings

| Setting     | What it does                                                                      |
| ----------- | --------------------------------------------------------------------------------- |
| Output type | Sets how the selected field is shown in the app. Choose **Image** for image data. |
| Title       | The label shown above the image, such as `Generated image`.                       |

### Good business uses

* Show a generated product visual.
* Return a processed image for review.
* Share a final design preview.

### Next steps

* Go back to [Outputs (Apps)](/studio/nodes/outputs-apps.md).
* Learn how to create images with [Image Generation](/studio/nodes/action-nodes/image-generation-1.md).
* Compare it with [File output](/studio/nodes/outputs-apps/file-output.md).
