In Salesforce Visualforce pages, we can enhance the UI of the app pages by displaying images on the visualforce pages. There are several methods to embed or add an image to the custom pages of visualforce, such as using a static image resource and referring to that in the page component.
In this Salesforce tutorial, I will explain how to embed images into the custom Salesforce Visualforce Pages.
Methods to Embed Images in Visualforce Pages
Now, we are going to discuss all the possible methods to add an image to a custom visual page in Salesforce.
Add Image on a Visualforce Page Through a Static Resource
The most common method of adding an image to Visualforce pages is using a static resource.
In Salesforce, the static resource files can store images, stylesheets, and JavaScript files that we can reference in the Visualforce pages.
- First, we need to create a static resource to store the image file, and for that, navigate to Setup > Static resources > New.
- Enter the label for the static resource and then upload the image from your system that you want to display on the Visualforce page.
After this, select the access level of the static resource and click on the Save button.
- Now, open the visualforce page and add the static resource in the page block, following the code below.
<apex:page>
<apex:image value="{!$Resource.vfimage}" />
</apex:page>In the above code block, “vfimage” is the name of the static resource.
- After adding the static resource to the Visualforce page, navigate to the Salesforce Visualforce page setup from Setup > Visualforce pages and click the Preview button.
This way, we can embed the image in the custom visualforce page in Salesforce.
Display an Image Stored in a Document on a Salesforce Visualforce Page
We need the Document’s URL and access permissions to display an image stored in a Document on a Salesforce Visualforce page.
- First, we need to add the image to the document object. In Salesforce Lightning, the document object is not available, so we have to switch to the Classic edition.
On the setup page of Salesforce Classic, click on the App Launcher, then search and select the Document object.
- Upload the image and ensure the “Externally Available Image” checkbox is checked. This will make the image accessible to all.
- After uploading the