Published 2014-10-28 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

Image component is used to place an image in the design.

** This class will not be supported in 2015.

   All functionalities of AppsFramework are more improved, integrating with CAPH. Therefore Appsframework is not supported since 2015 Smart TV. To use functionalities of Appsframework, refer to here.

The size of the image can be specified.

Figure. Image component

Syntax $.fn.sfImage = function(options)
Parameter options

src (string) - Image source


  • ID - Image ID
  • BgImage - Image source
  • BgColor - Background color
  • Margins Left and Top - Image position on the screen
  • Margins Width and Height - Image size

The Supported file formats are JPEG, BMP, GIF, PNG, TIF and so on.

Figure. Image properties box

The default code for the Image component CSS file is given below:

#SceneScene1 #svecImage_WQSM {
    position: absolute;
    left: 620px;
    top: 130px;
    width: 170px;
    height: 150px;

The screenshot of the Emulator, in the figure given below, contains scenes nested within each other, and not an image component. A main scene can have several scenes within it; that is the scenes can be nested. When adding a new component in scene1 or scene2, care should be taken that the component is not placed outside the corresponding scene.

Figure. Nested scene