Salesforce | Uploading and using images in Visualforce page

Author - Webner

When there is requirement of displaying images in a Visualforce page, following methods can be adopted:

Method 1: If the image is present on another website/server.

Use this code:

<apex:image url="Paste URL of the image" styleClass="imageStyle"/>

Method 2: Uploading image in “Static Resources”

This is used when the image needs to be uploaded from local system:

1.  Login to Salesforce account.

2. Click “Setup”

3. Click “Develop”:

4. Click “Static Resources”:

5. Click “New”:

6. Give Name, Description and choose image that needs to be uploaded:

7. Click Save.

8. Click “View file”:

A new tab will open displaying the image.

9. Copy the link of new tab and paste it in.

Method 3: Upload images in “Documents” object

1. Click Documents:

2. Click ‘New Folder”.

3. Write Name of folder and click “Save”:

4. Click ‘New Document”:

5. Fill in the blocks and choose an image to upload as shown:

6. After clicking save, the following screen appears. Click on ‘View file” link:

A new tab opens. Copy the URL of the new tab and paste it into:

<apex:image url="Paste URL of the image" styleClass="imageStyle"/>
Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *