upload the image in Static resource (Search in quick find box on setup page) by creating a new record and use the name TestImage for the given example.
There are multiple ways to add images into a visual force page.
Please find the explanation below.
By using <apex:Image> component you can add images to the visual force page.This helps you to insert a graphic image rendered with HTML <img> tagThis component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated <img> tag.
Inserting image in visual force page using static resource :
The way you reference a static resource in Visualforce markup depends on whether you want to reference a stand-alone file, or whether you want to reference a file that is contained in an archive (such as a .zip or .jar file):
To reference a stand-alone file, use $Resource.<resource_name> as a merge field, where <resource_name> is the name you specified when you uploaded the resource.
To reference a file in an archive, use the URLFOR function. Specify the static resource name that you provided when you uploaded the archive with the first parameter and the path to the desired file within the archive with the second.
public with sharing class ImageController {
public String imageURL{get;set;}
public ImageController()
{
imageURL='/servlet/servlet.FileDownload?file=';
List< document > documentList=[select name from document where
Name='SamplePic'];
if(documentList.size()>0)
{
imageURL=imageURL+documentList[0].id;
}
}
}
Please mark it as best answer if it helps you.........
upload the image in Static resource (Search in quick find box on setup page) by creating a new record and use the name TestImage for the given example.
From image Url
<apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/>
From Static resource
<apex:image id="theImage" value="{!$Resource.myResourceImage}" width="200" height="200"/>
From Static resource zip file
<apex:image url="{!URLFOR($Resource.TestZip, 'images/Bluehills.jpg')}" width="50" height="50"/>
You can use normal HTML
<img id="theImage" src="/img/myimage.gif" width="220" height="55"/>
First create zip file for image then create static resource in salesforce and save zip file in it.
like image name in zip file is TestImage
use this static resource as url in vf page.
<apex:image url="{!$Resource.TestImage}" />
For creating static resource go through below link:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_create.htm.
If your problem is solved than Please mark this as solved.
Thanks,
Nitin Sharma
There are multiple ways to add images into a visual force page.
Please find the explanation below.
By using <apex:Image> component you can add images to the visual force page.This helps you to insert a graphic image rendered with HTML <img> tagThis component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated <img> tag.
Example :
Inserting image in visual force page using static resource :
The way you reference a static resource in Visualforce markup depends on whether you want to reference a stand-alone file, or whether you want to reference a file that is contained in an archive (such as a .zip or .jar file):
To reference a stand-alone file, use $Resource.<resource_name> as a merge field, where <resource_name> is the name you specified when you uploaded the resource.
For example:
To reference a file in an archive, use the URLFOR function. Specify the static resource name that you provided when you uploaded the archive with the first parameter and the path to the desired file within the archive with the second.
For example:
or
Sample example :
VF Page :
Controller Page :
Please mark it as best answer if it helps you.........
Best Regards,
Nagendra.P