io.display.image
A chart or a photo, right in the step.
io.display.image shows a picture in a page or in a step of an action. It takes any URL the browser can load. Show a chart before someone decides, or the photo a customer uploaded. It only displays and returns nothing.
The simplest one
The whole action file, and roughly what your team sees when it runs.
Review photo
What you can set
The settings you will reach for most, each with the line of code that turns it on.
Any image URL. A chart from a chart service or a signed link to an uploaded file. If the browser can load it, it shows.
Four sizes. Pick how tall the picture may get: thumbnail, small, medium or large.
Full width by default. Leave out the size and the picture is as wide as there is room for.
Text for when it does not load. Screen readers read the alt text. It also shows when the image does not load. Without it, the label is used.
A heading or none. The label is the heading above the picture. Pass null to show the picture alone.
Next to a question. In io.group it sits next to inputs, such as a photo right above the question whether to approve it.
More in the docs
This page shows the idea. The docs have every prop, the checks on the server and more examples.
Next components
Three more calls on io. Each one shows a control and hands your code a typed value.
Write your first tool today.
An async function, a few await calls, and the form is in the browser.