Add an Image or Video to a Survey

Visual elements, such as images and videos, can provide additional context to survey questions and make your form more engaging and interesting for respondents. This example demonstrates how to add an image or video to a form or survey.

To add an image to your survey or form, define an object with the type property set to "image" and add it to the elements array. Within this object, specify a unique name that identifies your image.

To specify the image you want to add, assign an image URL or a Base64-encoded image to the imageLink property. The value you assign to this property will be passed on to the src attribute of the underlying <img> element.

Base64-encoded content substantially increases the size of the resulting survey JSON object. We recommend using file URLs over Base64-encoded files whenever possible. In Survey Creator, you can upload files to a storage in order to save only their URLs in the imageLink property. Refer to the following demo for information on how to implement this functionality: Manage Image Uploads.

If you want to specify the size of your image, set the imageHeight and imageWidth properties to positive numbers or CSS values. If your image should be resized to fit into its container, set the imageFit property. For information on accepted values and how these values apply, refer to the object-fit CSS property description. In this demo, you can change the imageHeight, imageWidth, and imageFit properties using the Settings panel.

Alternative text, or alt text, specifies a textual description of an image that is displayed if the image cannot be rendered. In addition, alt text enables search engines to correctly classify the image and helps users with visual impairments understand the image content using screen readers. To set alt text for your image, assign it to the altText property. Its value will be passed on to the alt attribute of the underlying <img> element.

SurveyJS Form Library allows you to embed video files and YouTube videos. To add a video to your survey, follow the same steps as you do when adding an image. Create an object with a specified name and the type property set to "image" and add this object to the elements array. Assign a video URL to the imageLink property. It supports links to YouTube videos and URLs of video files. If you want to resize the video, set the imageHeight and imageWidth properties.

As purely visual elements, images and videos do not support titles and descriptions out of the box. However, if you need to add a description, you can place your image or video into a panel or page and specify its description property, as shown in this demo.