Apex Code Development You need to sign in to do that
Don't have an account?
dhueber@tsys.com Trouble adding image to Visualforce page
I'm attempting to add my company logo to a visual force page, which is then being rendered as a pdf, but have not been successful. I've attempted to do so in three ways:
Image is on a website:
<apex:image url="http://www.tsysacquiring.com/graphics/logos/tsysacquiring_top_logo.gif" width="220" height="55"/>
Image has been loaded into Salesforce into documents, and is in the /alva/ folder:
<apex:image value="/alva/TSYS_logo_for_TSYS_Sales_App.jpg" width="220" height="55"/>
Image is on my C:\drive:
<apex:image value="C:\data\TSYS_Logo_for_TSYS_Sales_App.jpg" width="220" height="55"/>
All three attempts have resulted in a broken image icon being displayed. This seems like a very straightforward thing I'm attempting, and I'd expect it to be rather simple. Any one have a syntax example that they know works.
Thanks!
Zip the image up then load the zip file to Salesforce as a Static Resource (Setup > Static Resources > New). Then use an img tag similar to:
<img src="{!URLFOR($Resource.graphics, 'logo.png')}"/>Where "graphics" from the code above is the Name of the Static Resource and "logo.png" is the reference to the actual image file.
-greg
All Answers
Zip the image up then load the zip file to Salesforce as a Static Resource (Setup > Static Resources > New). Then use an img tag similar to:
<img src="{!URLFOR($Resource.graphics, 'logo.png')}"/>Where "graphics" from the code above is the Name of the Static Resource and "logo.png" is the reference to the actual image file.
-greg
Example <apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/> HTML Output <img id="theImage" src="/img/myimage.gif" width="220" height="55"/> Resource Example <apex:image id="theImage" value="{!$Resource.myResourceImage}" width="200" height="200"/> HTML Output <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" /> HTML Output <id="theImage" src="[generatedId]/images/Bluehills.jpg" width="50" height="50"/>Maybe one of this examples can hepl you.
Good Luck!
Bruno
Thanks so much! I'm a newbie with Visualforce, but I also found through additional reading and research mention of the Statis Resource area, and was able to get it to work Monday after posting the question.
<apex:image url="{!URLFOR($Resource.images,'images/ss.jpg')}" width="825" height="75"/>
images means your zip file name....
images/--->folder name ss/jpg-->image name
Even for me image is broken
<apex:image url="{!urlfor($Resource.sample5,'/sample5/Chrysanthemum.jpg')}" width="825" height="75"/>
Could you please correct me?
I tried this and works perfect, give it a try.
<img src="{!$Resource.amazon}" height="50" width="100" alt="amazonlogo"></img>
For some reason VF requires you to put a closing tag for img, but it works!
Hi all,
I am trying to do the same as dhueber but none of the examples are woring for me.
Last syntax I used is:
<img src="{!$Resource.grt_logo}" height="50" width="100" alt="grt_logo"></img>
I uploaded the zip as static resource:
ZIP name: grt_logo.zip
file name: grt_logo.png
static resource name: grt_logo
The result is always a broken image. Can you please help me to fix this?
Thanks,
There have been a number of responses to this original post and many of them offer viable solutions to the problem. So, hopefully, you understand that there is some flexibility here in terms of how you resolve your particular issue.
My response is specific to the latest post by erikdozsa...
Becuase you uploaded the grt_logo.zip file as a static resource and becuase you are trying to reference the image from that particular static resource within an HTML <img> tag, I recommend that you use the URLFOR() formula in your code. Using this formula will allow the platform to populate the full URL for the object that you refer to within the formula. Again, for your particular example, we need to tell the formula the static resource for which we need a URL. Since your static resource is a zip file we don't want the zip itself, we want the image that it contains. In general we are looking for the following:
Substituting the information you provided from your post we have the following:
If your zip file contained folders in which the image would be found then we would simply include the folder references in the portion of the formula where we identify the image itself. For example, if your "grt_logo.png" image was located in a folder within the zip file labeled "images" then the full reference to the image would need to include that folder reference as well or "/images/grt_logo.png".
Anyway, now that we've got the URLFOR() formula working, we need to drop that into the HTML <img> reference, which is below:
<img src="{!URLFOR($Resource.grt_logo, 'grt_logo.png')}" height="50" width="100" alt="grt_logo"></img> - OR - <img src="{!URLFOR($Resource.grt_logo, 'grt_logo.png')}" height="50" width="100" alt="grt_logo" />Sorry for the lengthy reply but I thought the clarification would be useful to other readers...
-greg
Many thanks, now it is super clear and of course it works fine. :)
HI,
Thanks for your post its very helpful for all.
Regards,
Kalpesh
This is not working. can some one help me to display the image in word from static resource.
<img src="{!URLFOR($Resource.Company_logo, 'company_logo.png')}" width="140" height="85" alt="company_logo"/>
Thanks.