<apex: image> Component in Visualforce Page

The <apex: image> is another important Visualforce component that acts as a graphic image rendered with the HTML <img> tag.

The HTML pass-through attributes are supported by this component using the "html-" prefix and attached to the generated <img> tag.

The <apex: image> component has the following attributes:

1. alt

The "alt" is a string-type attribute that specifies an alternative image's text description.

Syntax:

2. dir

The "dir" is a string-type attribute used for defining the direction in which the generated HTML component should be read. RTL and LTR are the two possible values for this attribute.

Syntax:

3. height

The "height" is a string-type attribute used for defining the height at which this image should be displayed. The height is defined either in percent or pixels. The dimension of the source image file is set as a default value for this attribute.

Syntax:

4. id

The "id" is a string-type attribute, i.e., a unique identifier that allows the image component to be referenced by other components on the page.

Syntax:

5. ismap

The "ismap" is a Boolean-type attribute that specifies whether this image is used as an image map. By default, its value is set to false. When we set its value to true, this component should be the child of the <apex: commandLink> component.

Syntax:

6. lang

The "lang" is a Boolean type attribute used for specifying the base language used for the generated HTML output. The "en" and "en-US" are two possible values for this attribute.

Syntax:

7. longdesc

The "longdesc" is a string-type attribute used to specify the URL that links to a longer image description.

Syntax:

8. onclick

The "onclick" is a string-type attribute used to invoke the JavaScript method when the onclick event occurs or when the User clicks the image.

Syntax:

9. ondblclick

The "ondblclick" is a string-type attribute used to invoke the JavaScript method when the ondblclick event occurs or when the User clicks the image twice.

Syntax:

10. onkeydown

The "onkeydown" is a string-type attribute used to invoke the JavaScript method when the onkeydown event occurs or when the User presses a keyboard key.

Syntax:

11. onkeypress

The "onkeypress" is a string-type attribute used to invoke the JavaScript method when the onkeypress event occurs or when the User holds down or presses a keyboard key.

Syntax:

12. onkeyup

The "onkeyup" is a string-type attribute used to invoke the JavaScript method when the onkeyup event occurs or when the User releases a keyboard key.

Syntax:

13. onmousedown

The "onmousedown" is a string-type attribute used to invoke the JavaScript method when the onmousedown event occurs or when the User presses the mouse button.

Syntax:

14. onmousemove

The "onmousemove" is a string-type attribute used to invoke the JavaScript method when the onmousemove event occurs or when the User moves the mouse pointer.

Syntax:

15. onmouseout

The "onmouseout" is a string type attribute used to invoke the JavaScript method when the onmouseout event occurs or when the User moves the mouse pointer away from the image.

Syntax:

16. onmouseover

The "onmouseover" is a string type attribute used to invoke the JavaScript method when the onmouseover event occurs or when the User moves the pointer over the image.

Syntax:

17. onmouseup

The "onmouseup" is a string-type attribute used to invoke the JavaScript method when the onmouseup event occurs or when the User releases the mouse button.

Syntax:

18. rendered

The "rendered" is a Boolean type attribute used to specify whether this component needs to be rendered on the page or not. By default, its value is set to true.

Syntax:

19. style

The "style" is a string type attribute used to specify the inline CSS style that will be applied for displaying the image component.

Syntax:

20. styleClass

The "styleClass"' is a string-type attribute used to specify the style class that will be applied to display the image component.

Syntax:

21. styleClass

The "styleClass" is a string type attribute used to specify the style class that will be applied for displaying the image component.

Syntax:

22. title

The "title" is a string-type attribute used to specify the text to display as a tooltip when the User's mouse pointer hovers over this component.

Syntax:

23. url

The "url" is a string-type attribute used to specify the path to the image which we need to display.

Syntax:

24. usemap

The "usemap" is a string-type attribute used to specify the name of the client-side image map for which this element provides the image.

Syntax:

25. value

The "value" is an Object-type attribute used to specify the path of the image we need to display.

Syntax:

26. width

The "width" is a string-type attribute used to specify the width at which the image should be displayed. The value is defined either in percentages or pixels. By default, its value is set to the dimension of the source image file.

Syntax:

Let's take an example to understand how we can use the apex: image component on the Visualforce page.

ApexImageExample.vfp

Output