--- 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: Angular source: https://surveyjs.io/form-library/examples/add-image-and-video-to-survey/angular index: https://surveyjs.io/form-library/examples/overview.md --- # Add an Image or Video to a Survey (Angular) 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 `` 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 `` 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 ### `src/app/components/json.ts` ```ts 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/app/components/survey.component.css` ```css /* You can add your custom CSS here. */ ``` ### `src/app/components/survey.component.html` ```html ``` ### `src/app/components/survey.component.ts` ```ts import { Component, OnInit } from "@angular/core"; import { Model } from "survey-core"; import { json } from "./json"; import "./survey.component.css"; import "survey-core/survey-core.min.css"; @Component({ // tslint:disable-next-line:component-selector selector: "component-survey", templateUrl: "./survey.component.html", styleUrls: ["./survey.component.css"] }) export class SurveyComponent implements OnInit { model: Model; ngOnInit() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); this.model = survey; } } ``` ### `src/app/components/theme.ts` ```ts export const themeJson = {}; ``` ### `src/app/app.component.css` ```css ``` ### `src/app/app.component.html` ```html ``` ### `src/app/app.component.ts` ```ts import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "CodeSandbox"; } ``` ### `src/app/app.module.ts` ```ts import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { SurveyModule } from "survey-angular-ui"; import { SurveyComponent } from "./components/survey.component"; @NgModule({ declarations: [AppComponent, SurveyComponent], imports: [BrowserModule, SurveyModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ### `src/environments/environment.prod.ts` ```ts export const environment = { production: true }; ``` ### `src/environments/environment.ts` ```ts // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { production: false }; ``` ### `src/index.html` ```html ``` ### `src/main.ts` ```ts import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app/app.module"; import { environment } from "./environments/environment"; if (environment.production) { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.log(err)); ``` ### `src/polyfills.ts` ```ts /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import "core-js/proposals/reflect-metadata"; /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ // import 'web-animations-js'; // Run `npm install web-animations-js`. /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import "zone.js/dist/zone"; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ ``` ### `src/styles.css` ```css /* You can add your custom CSS here. */ ``` ### `src/typings.d.ts` ```ts /* SystemJS module definition */ declare var module: NodeModule; interface NodeModule { id: string; } ``` ### `.angular-cli.json` ```json { "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ] } ``` ### `_tsconfig.json` ```json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "allowSyntheticDefaultImports": true, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "resolveJsonModule": true, "target": "es2015", "module": "es2020", "lib": [ "es2018", "dom" ] } } ``` ### `package.json` ```json { "name": "surveyjs-angular", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "14.1.1", "@angular/cdk": "14.1.1", "@angular/common": "14.1.1", "@angular/compiler": "14.1.1", "@angular/core": "14.1.1", "@angular/forms": "14.1.1", "@angular/platform-browser": "14.1.1", "@angular/platform-browser-dynamic": "14.1.1", "@angular/router": "14.1.1", "core-js": "3.6.4", "rxjs": "6.5.4", "survey-core": "latest", "survey-angular-ui": "latest", "tslib": "1.13.0", "zone.js": "0.11.7" }, "devDependencies": { "@angular/cli": "1.6.6", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/core-js": "0.9.46", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "3.9.7" }, "keywords": [ "angular", "surveyjs" ], "description": "SurveyJS-Angular example project" } ``` ## Other Frameworks - [React](https://surveyjs.io/form-library/examples/add-image-and-video-to-survey/reactjs.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)