+ Start a Discussion

How to add images in visualforce page

We want to add hundreds of images in visualforce page(like images in online shopping) and the user of the application should be upload/delete the image by himself dynamically?


Thanks in Advance,
Naga Kiran Kumar K

Use the standard tag for images: <apex:image>





A graphic image, rendered with the HTML <img> tag.


<apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/>

The example above renders the following HTML:
<img id="theImage" src="/img/myimage.gif" width="220" height="55"/>

Resource Example
<apex:image id="theImage" value="{!$Resource.myResourceImage}" width="200" height="200"/>

The example above renders the following HTML:
<img id="theImage" src="<generatedId>/myResourceImage" width="200" height="200"/>

Zip Resource Example
<apex:image url="{!URLFOR($Resource.TestZip, 'images/Bluehills.jpg')}" width="50" height="50" />

The example above renders the following HTML:
<id="theImage" src="[generatedId]/images/Bluehills.jpg" width="50" height="50"/>


I've tried to deploy the "zip resource" method on our customer login VF page, but it won't display.  This was the default VF page that comes with the out-of-the-box deployment of the old flavor of the customer portal, it;s very simple, just a plain background, and a box containing a username & password fields.

I attempted to insert a few different similar versions of this line:

<apex:image url="{!URLFOR($Resource.LogoZipName, 'Logofile.png')}"/>

Is there any additional code I need to put "around" it?  For example, one resource suggested I append an additional "</img>" tag to the end of my line of code, but this threw an error.

As a rookie developer, I was also wondering -- how will the placement of the image tag line (in relation to the rest of the markup on the page) impact me here?  I tried to place the image line after an obvious break or line of demarcation, and although SFDC did not throw an error and accepted my change to the VF code, it displayed no logo on the (un)affected page.

Help?  Thanks!    - David

Richard DiNardo 6Richard DiNardo 6
So do this I had to create a zip file the root of my zip file had my style sheet .css file. Then there was a folder in there called images and in the images folder I put all the images I want to use when i use that css file. Then I uploaded this zip file as a static resource

so the contents of the file looked like

then all i had to do was reference the image in my visual force page like so


or another example

 body { background-image: url("images/metalplate.jpg") }