+ Start a Discussion
Chakori RashmiChakori Rashmi 

Image

How can I add image in vf page?
Manish BhatiManish Bhati
Just use the apex:image tag. Below is the example from Salesforce Doc:-
<apex:image url="{!$Resource.TestImage}" width="50" height="50"/>

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.
suresh sanneboina 4suresh sanneboina 4
Hi

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"/>
Nitin SharmaNitin Sharma
Hi,

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
 
NagendraNagendra (Salesforce Developers) 
Hi Chakori Rashmi,

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 :
<apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/>

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:
<apex:image url="{!$Resource.TestImage}" width="50" height="50"/>

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:
<apex:image url="{!URLFOR($Resource.TestZip,
                  'images/Bluehills.jpg')}" width="50" height="50"/>

                                                       or
<apex:includeScript value="{!URLFOR($Resource.LibraryJS, '/base/subdir/file.js')}"/>

Sample example :

VF Page :
 
<apex:page controller="ImageController" showheader="false" sidebar="false">

    <apex:form>
      <apex:image url="{!imageURL}">
    </apex:image></apex:form>

</apex:page>

Controller Page :
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.........

Best Regards,
Nagendra.P