TComponents. Image

new Image(parent, props)

Image component that can display an image with specific styles and handle events. This class focuses on the specific properties of the Image component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeDescription
parentHTMLElement

HTML element that is going to be the parent of the component

propsTComponents.ImageProps

Properties to initialize the component

Source
Example
const imgComponent = new TComponents.Image(document.body, {
  position: 'absolute',
  zIndex: 1000,
  width: 200,
  height: 150,
  imgSrc: 'https://xxx.png',
  imgStyle: { objectFit: 'contain' }
});

imgComponent.render();

Extends

Members

imgSrc :string

Sets the source of the image.

Type:
  • string
Source
Example
const imgComponent = new TComponents.Image(document.body, {
  position: 'absolute',
  zIndex: 1000,
  width: 200,
  height: 150,
  imgSrc: '',
  imgStyle: { objectFit: 'contain' }
});

imgComponent.render();

// Set a new image source
imgComponent.imgSrc = 'https://xxx.png';

imgStyle :object

Sets the style of the image.

Type:
  • object
Source
Example
const imgComponent = new TComponents.Image(document.body, {
  position: 'absolute',
  zIndex: 1000,
  width: 200,
  height: 150,
  imgSrc: '',
  imgStyle: { objectFit: 'contain' }
});

imgComponent.render();

// Set a new image style
imgComponent.imgStyle = { objectFit: 'cover'};

onClick :function

Sets the onClick event handler. The handler can either be a string representing a function to be executed or a function itself.

  1. If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the image object.
  2. If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.
  • Correct (Statements Only): xx.onClick = "console.log('Action done.');"
  • Incorrect (Function Declaration): xx.onClick = "function() { console.log('Action done.'); }"
Type:
  • function
Source
Examples
const imgComponent = new TComponents.Image(document.body, {
  position: 'absolute',
  zIndex: 1000,
  width: 200,
  height: 150,
  imgSrc: '',
  imgStyle: { objectFit: 'contain' }
});

imgComponent.render();

// Example 1: Using a string as the handler:
imgComponent.onClick = "console.log('Image clicked!', this.imgSrc);";
// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the imgComponent object
imgComponent.onClick = () => { console.log('Image clicked!', imgComponent.imgSrc); };
// Example 3: Using a common function as the handler:
imgComponent.onClick = async function() {
  console.log('Image clicked!', this.imgSrc);
};

tips :string

Set the button disabled state and review the tips.

Type:
  • string
Overrides
Source
Example
const image = new TComponents.Image(document.body, {
  position: 'absolute',
  left: 100,
  top: 100,
  zIndex: 1000,
  imgSrc: 'https://xxx.png'
});

// Render the image
image.render();

image.tips = 'New tips for the image';

// Disable image to display tips
image.enabled = false;

Methods

defaultProps() → {TComponents.ImageProps}

Returns the default values of class properties (excluding parent properties).

Overrides
Source
Returns:
Type: 
TComponents.ImageProps

markup() → {string}

Generates the HTML markup for the component.

Overrides
Source
Returns:

The HTML markup string

Type: 
string

onRender() → {void}

Handles the rendering process of the component, including setting up event listeners and applying image properties.

Overrides
Source
Returns:
Type: 
void

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:
NameTypeDescription
cssstring

The css string to be loaded into style tag

Source
Returns:
Type: 
void
Example
TComponents.Image.loadCssClassFromString(`
.tc-img {
  height: inherit;
  width: 100%;
  min-width: 0px;
}`);