---
title: Add an Image or Video to a Survey
product: Form Library
description: Discover how to enrich your surveys with images and videos using SurveyJS. Integrate static and dynamic visual content, resize images and videos, specify alternative text, and add descriptions. View free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/add-image-and-video-to-survey/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Add an Image or Video to a Survey (React)

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.

## Add an Image to a 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`](https://surveyjs.io/form-library/documentation/api-reference/page-model#elements) array. Within this object, specify a unique [`name`](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey#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`](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey#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](https://surveyjs.io/survey-creator/examples/free-nps-survey-template/), 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](https://surveyjs.io/survey-creator/examples/file-upload/).

### Resize the Image

If you want to specify the size of your image, set the [`imageHeight`](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey#imageHeight) and [`imageWidth`](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey#imageWidth) properties to positive numbers or CSS values. If your image should be resized to fit into its container, set the [`imageFit`](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey#imageFit) property. For information on accepted values and how these values apply, refer to the [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property description. In this demo, you can change the `imageHeight`, `imageWidth`, and `imageFit` properties using the Settings panel.

### Specify Alternative Text

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`](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey#altText) property. Its value will be passed on to the `alt` attribute of the underlying `<img>` element.

## Add a Video to a Survey

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.

## Add a Description to an Image and Video

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](https://surveyjs.io/form-library/documentation/api-reference/panel-model) or [page](https://surveyjs.io/form-library/documentation/api-reference/page-model) and specify its [`description`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#description) property, as shown in this demo.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "title": "'Asking' is a powerful tool—as long as it remains in your hands",
  "description": "Built to empower enterprises to choose full integration and security",
  "logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
  "logoWidth": 200,
  "logoHeight": 80,
  "logoFit": "cover",
  "logoPosition": "right",
  "pages": [
    {
      "name": "all",
      "title": "Full integration is simple",
      "elements": [
        {
          "type": "panel",
          "name": "panel1",
          "elements": [
            {
              "type": "image",
              "name": "surveyJS-integration-illustration",
              "imageLink": "https://surveyjs.io/Content/Images/V2/features-page/Full-Integration.png",
              "imageHeight": 330,
              "imageWidth": 800,
              "altText": "SurveyJS component integration"
            }
          ],
          "description": "Integrate SurveyJS libraries into your web application to create an unlimited number of custom survey forms, securely store them in your database, analyze responses in a dashboard, and save new or export filled forms to PDF."
        },
        {
          "type": "panel",
          "name": "panel2",
          "elements": [
            {
              "type": "image",
              "name": "surveyJS-integration-tutorial",
              "imageLink": "https://youtu.be/RAXo6pzOczQ",
              "imageHeight": 450,
              "imageWidth": 800
            }
          ],
          "description": "Refer to the following YouTube video to learn how to embed surveys and forms in your JavaScript application in minutes."
        }
      ]
    }
  ],
  "widthMode": "static",
  "width": 900
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/add-image-and-video-to-survey/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/add-image-and-video-to-survey/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/add-image-and-video-to-survey/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/add-image-and-video-to-survey/vanillajs.md)