Table of Contents
Note

This documentation describes the InputImage Vue component for native UI views, for Xml templates see input-image.

InputImage

An image upload input that binds to a FileReference value. Shows a preview of the uploaded image and supports delegated/lazy loading.

Import

import { InputImage } from '@neos/app'

Props

Inherits all shared inputProps (label, labelPosition, readonly, disabled) plus:

Prop Type Default Description
modelValue FileReference \| null undefined Current image reference (v-model)
delegatedLoading boolean true Use delegated/lazy loading for the image preview
label string undefined Input label
labelPosition 'top' \| 'left' \| 'hidden' 'top' Label position
readonly boolean false Disable image selection
disabled boolean false Disable the input

Emits

Event Payload Description
update:modelValue FileReference \| null Emitted when an image is selected or removed

Usage Examples

Profile picture upload

<InputImage v-model="profilePhoto" label="Profile Picture" />

In a form

<VerticalLayout space="small">
  <StringFormField property-name="productName" />
  <InputImage v-model="productImage" label="Product Image" />
</VerticalLayout>

Non-lazy loading

<InputImage v-model="logo" label="Company Logo" :delegated-loading="false" />

See Also