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"/>