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 image, open it and copy its URL from the browser. The URL will look as follows:
<img src="/servlet/servlet.FileDownload?file=<documentid>"- Now open the Visualforce page and enter the code below to add the document image to the Visualforce page inside the <apex:page>.
<apex:page>
<h1>Image from Document</h1>
<img src="/servlet/servlet.FileDownload?file=DOCUMENT_ID" alt="Document Image"/>
</apex:page>Here, replace the DOCUMENT_ID with the ID of the document that you have copied from the URL.
- Now, save the changes and view the preview from Setup > Visualforce pages > select the Visualforce page> click Preview.
The preview will open only in the classic edition because we display the image for the document object that is available in the classic experience here.
This way, we can display an image stored in a Document object on a Salesforce Visualforce page.
Dynamically Fetch the URL in Apex:
If you want to fetch the Document URL dynamically, you can use an Apex controller.
To create a controller class, navigate to the developer console, and to create a controller, select File> New> Apex Class.
Enter the Label for the controller class and enter the code below to define the logic of the controller class.
public with sharing class DocumentImageController {
public String imageUrl { get; set; }
public DocumentImageController() {
Document doc = [SELECT Id FROM Document WHERE Name = 'ImageName' LIMIT 1];
imageUrl = '/servlet/servlet.FileDownload?file=' + doc.Id;
}
}
In the above code block, replace the ImageName with the name of the image saved in the document.
After this, you can modify the Visualforce page accordingly.
<apex:page controller="DocumentImageController">
<h1>Image from Document</h1>
<img src="{!imageUrl}" alt="Document Image"/>
</apex:page>With this, you can dynamically fetch the URL and display the document image on the Visualforce page.
If the “Documents” object is not enabled in your org, consider using the Files or Static Resources feature instead.
Display Image Attachments in a Visualforce Page
In Salesforce Visualforce pages, we can display a list of images or images related to an object through the attachments. The images uploaded to the object records using the attachments can be displayed on the visualforce page.
If you are doing it for any custom Salesforce object, then first enable the attachments for the custom object. Then, add the “Notes and Attachments” to the default page layout, making Attachments visible.
In the steps below, we will see how to display image attachments of an object on the custom visualforce pages.
- Navigate to the developer console, create a controller to handle the logic of the visualforce page, and select File > New > Visualforce page.
Enter the label for the apex class and the code below.
public class CustomController {
public List<ContentVersion> imageFiles { get; set; }
public String opportunityId { get; set; }
public CustomController() {
opportunityId = ApexPages.currentPage().getParameters().get('opportunityId');
if (opportunityId != null) {
// Fetch Document IDs linked to the Opportunity
List<ContentDocumentLink> documentLinks = [
SELECT ContentDocumentId
FROM ContentDocumentLink
WHERE LinkedEntityId = :opportunityId
];
// Extract Document IDs into a list
Set<Id> contentDocumentIds = new Set<Id>();
for (ContentDocumentLink link : documentLinks) {
contentDocumentIds.add(link.ContentDocumentId);
}
// Fetch Content Version records using the IDs
if (!contentDocumentIds.isEmpty()) {
imageFiles = [
SELECT ContentDocumentId, Title, FileType, VersionData
FROM ContentVersion
WHERE ContentDocumentId IN :contentDocumentIds
AND FileType IN ('PNG', 'JPG', 'JPEG', 'GIF')
];
} else {
imageFiles = new List<ContentVersion>();
}
} else {
imageFiles = new List<ContentVersion>();
}
}
}The controller will fetch images, such as JPG, PNG, etc, that are attached to specific opportunity records.
The opportunityId stores the ID of the Opportunity passed as a parameter in the Visualforce page URL. Then, the content document link will link Salesforce records (like Opportunities) to documents stored in Salesforce files.
- Now, we will create the visualforce embedded with the controller that we have defined.
<apex:page controller="CustomController">
<apex:pageBlock title="Opportunity Image Files">
<apex:repeat value="{!imageFiles}" var="file">
<div style="margin-bottom: 20px;">
<h3>{!file.Title}</h3>
<img src="/sfc/servlet.shepherd/version/download/{!file.Id}"
alt="{!file.Title}"
style="max-width: 400px; border: 1px solid #ccc; padding: 5px;" />
</div>
</apex:repeat>
</apex:pageBlock>
</apex:page>- After creating the controller and the Visualforce page, navigate to the Visualforce page setup and open the page in the Preview.
To view the image of a specific opportunity record, we have to hardcode the ID of the opportunity in the URL as:
https://your-domain.salesforce.com/apex/OpportunityImageDisplay?opportunityId=006XXXXXXXXXXXXHere, replace the “006XXXXXXXXXXXX” with the opportunity record ID and refresh the page.
Then, you will see the list of the images added to the Opportunity record as files and attachments.
This way, we can show an image from the object lists and attachments on a Custom Visualforce page.
Conclusion
In this Salesforce tutorial, we have learned about the various methods to add or embed images to the Visualforce page in Salesforce. We discussed how to add an image through the Static resource, then we added an image stored in the Document file, and lastly, we displayed the image from the opportunity record files and attachments.
To add an image to the visualforce page, make sure that all the users can access the image you will display.
- Visualforce Page Tags in Salesforce
- Visualforce Components in Salesforce
- Implement Pagination in Salesforce Visualforce Pages
- Embed Reports Charts and Dashboards to Visualforce Pages in Salesforce
Abhijeet is a skilled Salesforce developer with experience in developing and integrating dashboards, data reports, and Salesforce applications. He is also skilled at optimizing processes and flow automation processes, coding, and executing complex project architecture. Read more about us | LinkedIn Profile.
