Skip to main content
API contract 3.4

ImageField

Displays an image thumbnail that opens full size in a dialog when clicked. A broken image URL falls back to an icon — in both the thumbnail and the dialog — instead of the browser's default broken-image glyph.

Open in Storybook

Image fields arrive as an object ({url, filename}), so the dispatcher points the component at <source>.url. A non-image attachment renders as React Admin's FileField instead.

Example​

<ImageField source="photo.url" title="photo.filename" />

Props​

The component takes the same props as React Admin's ImageField (it renders its own thumbnail — with a broken-image fallback — rather than delegating to it), for a single image URL value.

NameTypeDefaultDescription
source (required)string—Path to the image URL on the record, e.g. "photo.url"
titlestring—Path to the value used as the alt/title text
labelstring | ReactElement | falselabel from the schemafalse hides the label
emptyTextstring—Text shown instead of a thumbnail when the record has no value
sxSxProps<Theme>200×100, objectFit: 'contain'Style applied to the thumbnail directly (not via an '& img' selector) — also sizes its broken-image fallback, so a dead URL keeps the same footprint the image would have had

The click-to-expand dialog only appears when the record actually carries a URL; an empty value renders emptyText (if given) or nothing at all, with no pointer cursor either way.

Schema mapping​

type: "object" with format: "base64-image":

{"name": "photo", "type": "object", "format": "base64-image",
 "options": {"accept": [".jpg", ".png"], "image": {"resizeWidth": 1600}}}

AdminImageFileSerializer emits the format and the upload options:

from habarico.serializers import AdminImageFileSerializer, AdminModelSerializer


class ProductSerializer(AdminModelSerializer):
    photo = AdminImageFileSerializer(required=False)

    class Meta:
        model = Product
        fields = ["id", "name", "photo"]

See also​

Storybook