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:
<apex: image alt="Test Image"></apex: image>
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:
<apex: image dir="LTR"></apex: image>
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:
<apex: image height="50%"></apex: image>
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:
<apex: image id="imgId"></apex: image>
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.
AD
Syntax:
<apex: image ismap="true"></apex: image>
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:
<apex: image lang="en"></apex: image>
7. longdesc
AD
The "longdesc" is a string-type attribute used to specify the URL that links to a longer image description.
Syntax:
<apex: image longdesc=" https://www.javatpoint.com"></apex: image>
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:
<apex: image onclick="saveRecords();"></apex: image>
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:
<apex: image ondblclick="saveRecords();"></apex: image>
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:
<apex: image onkeydown="saveRecords();"></apex: image>
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:
<apex: image onkeypress="saveRecords();"></apex: image>
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:
<apex: image onkeyup="saveRecords();"></apex: image>
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:
<apex: image onmousedown="countKeys();"></apex: image>
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:
<apex: image onmousemove="countKeys();"></apex: image>
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:
<apex: image onmouseout="countKeys();"></apex: image>
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:
<apex: image onmouseover="countKeys();"></apex: image>
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:
<apex:image onmouseup="countKeys();"></apex:image>
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:
<apex: image onmouseup="countKeys();"></apex: image>
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:
<apex: image style="display:none;"></apex: image>
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:
<apex:image styleClass="imgClass"></apex:image>
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:
<apex: image styleClass="imgClass"></apex: image>
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:
<apex: image title="Image Title"></apex: image>
23. url
The "url" is a string-type attribute used to specify the path to the image which we need to display.
Syntax:
<apex: image url="https://www.javatpoint.com/images/logo/jtp_logo.png"></apex: image>
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:
<apex: image usemap="mapName"></apex: image>
25. value
The "value" is an Object-type attribute used to specify the path of the image we need to display.
Syntax:
<apex: image value=" url="https://www.javatpoint.com/images/logo/jtp_logo.png""></apex: image>
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:
<apex: image width=" url="50%"></apex: image>
Let's take an example to understand how we can use the apex: image component on the Visualforce page.
ApexImageExample.vfp
<!--create VF page for displaying image -->
<apex:page showHeader="false">
<!--use pageBlock, pageBlockSection, and pageBlockSectionItem to display current user information and image -->
<apex:pageBlock >
<apex:pageBlockSection columns="2">
<apex:pageblocksectionitem >
{! $User.FirstName } {! $ User.LastName }
({! $ User.Username })
</apex:pageblocksectionitem>
<apex:pageblocksectionitem >
<apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-logo.png"/>
</apex:pageblocksectionitem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
