The Image component allows supported image formats to be easily imported into your scene. Images are useful for adding visual elements but can also be utilized as buttons or UI components, as they fire on tap events upon user interaction.

Supported Image Formats

Zapworks Designer supports images in the following formats:

  • .png
  • .jpg

Images must be under 10 MB in order to be successfully uploaded into the system. If you have an image that is larger than 10 MB, try resizing it in a image editor of your choice.

Adding an Image

To add an image to your scene, select the image icon from the Components Panel, import your image and drag it onto your canvas.

Adding an Image component to an AR scene

Editing an Image

When you select your image in the canvas, the properties are editable via the Properties Panel.

Editing an Image component in an AR scene

Here, you can edit the following:

Property Description
Content Replace the Image with another image you have uploaded to the Media Library.
Transforms Edit the Size (Width and Height), Position (X/Y/Z coordinates), and Rotation (degrees on the X/Y/Z axes) of the Image. You can also Mirror the Image and change the component's layer Order (forwards or backwards) relative to other scene components.
Curve Add a curve to the Image and choose whether its curve direction is None, In or Out, as well as the degree of Curvature. You can also have it Wrap around a curved target if there is one present. See the Curved Image Tracking documentation for more.
Appearance Edit the Opacity, add a Frame and change its Corner Radius. You can also add a border to the Image and change the Border Width and Border Color.
Actions Create interactivity by adding an on tap Action to the Button.
Transition Effects Add an Enter or Exit transition effect to the Image.

To learn how to add interactivity to Image components, check out our Actions article.

zapcode branded_zapcode i