Adding an image to a form

General
1

Is there an example available somewhere on how to add a PNG image to a form?

[original thread by Bart Diricx]

2

We don’t have an example for this specific use case. Depending on your requirements I see various ways of implementing this feature.

For example you could extend an existing layout renderer and render an image this way. Positive: No change needed in either schema. Negative: No declarative support for your images.

A different approach is to add a custom UI schema element, for example Image with a url attribute. You will then need to register a custom renderer for this element, otherwise JSON Forms doesn’t know how to handle it. Postive: Declarative support for images. Negative: Custom UI Schema adaption which can’t be reused without your custom renderer.

If your imagedata or url is already part of the data schema, you could simply point a Control element to it. You will then again register a custom renderer either specific to the attribute or reacting on a certain attribute format (for example prefixing a string with image:.). Positive: No change in UI schema necessary. Potential negative: Your image (pointer) is stored in your data. I would not go this way if it’s not already part of it.

I hope I was able to help. Let me know if you have further questions.

3

[Bart Diricx]

Thank you for your quick response. I will give this a try…

4

[shivgarg5676]

Recently we came across such a scenario where we had to integrate Gallery component to preview images as well as to support image uploads.
We decided to go for the third approach. We created a custom renderer and registered it against control element. which we used to test for any string which has imgeURL to its end and rendered image Gallery for that url using the custom renderer.

import { Actions } from "@jsonforms/core";
import GalleryComponent from '../component/GalleryComponent'
dispatch(Actions.registerRenderer(rankWith(Number.MAX_VALUE, scopeEndsWith("imageUrl")), GalleryComponent));