+ Start a Discussion
Sarah DickinsonSarah Dickinson 

Images not rendered in Visualforce PDF

Hi,

I am having issues with the rendering of images in a Visualforce PDF.

ll my product images are stored on a server and are accessible at the URL http://images.metropuzzle.com/IMG2/[PRODUCT CODE]_IMG2_L.jpg
E.g. http://images.metropuzzle.com/IMG2/NPZPD1703_IMG2_L.jpg
When I try to use those URL in <apex:image> it does not render the image in the PDF...

User-added image


As I am trying to track down the issue, I found something very odd.
For this simple test I am using one of my product image, and an image I found online, the URL is http://investor.salesforce.com/files/design/newlogo-company.png -- This URL seems to redirect to the URL http://s1.q4cdn.com/454432842/files/design/newlogo-company.png

I am building the PDF with the Visualforce code below: 
<apex:page renderAs="PDF">
    <div class="productGridContainer">
            <div class="productGridItem">
                <div>
                    <apex:image value="http://images.metropuzzle.com/IMG2/NPZPD1703_IMG2_L.jpg"/>
                    <apex:image value="http://investor.salesforce.com/files/design/newlogo-company.png"/>
                    <apex:image value="http://s1.q4cdn.com/454432842/files/design/newlogo-company.png"/> 
                </div>
            </div>
    </div>
</apex:page>

It does not render my product image, and for the image I found online it only renders the first one, not the second one. But it is the same image!
User-added image

Would someone have any idea why this is not working?

Thanks a lot!
Soundar Raj PonpandiSoundar Raj Ponpandi
Hi Sarah Dickinson,

1. Save Your Images in " Static Resource " and call From  visualforce page like below
 
<apex:page renderAs="PDF">
    <div class="productGridContainer">
            <div class="productGridItem">
                <div>
                    <!--<apex:image value="http://images.metropuzzle.com/IMG2/NPZPD1703_IMG2_L.jpg"/>
                    <apex:image value="http://investor.salesforce.com/files/design/newlogo-company.png"/>
                    <apex:image value="http://s1.q4cdn.com/454432842/files/design/newlogo-company.png"/>  -->
                   
                   <apex:image url="{!$Resource.NPZPD1703_IMG2_L}" style="float:right;width:60%; height:80px;" />
		           <apex:image url="{!$Resource.newlogo-company}" style="float:right;width:60%; height:80px;"/> 
                   <apex:image url="{!$Resource.newlogo-company}" style="float:right;width:60%; height:80px;"/>  
                   

                </div>
            </div>
    </div>
</apex:page>

I Think This Code should  help , Please let me know if you have any doubt's.

Regards,
Soundar
 
Sarah DickinsonSarah Dickinson
Hi,

Thanks Soundar! 
My issue is that all the product images live on a different server, and maitaining them on that server and as static ressources would be a lot of extra work.
I still don't understand why sometimes the image is displayed and sometimes not when using external URLS... There is not documentation from Salesforce on that issue.

 
Sarah DickinsonSarah Dickinson
Also, I took one file that I uploaded on 3 different sites:

1. Shopify: https://cdn.shopify.com/s/files/1/0337/5853/products/rgb-HP1361-3D2-1000px-300dpi_medium.jpeg
2. Company FTP: http://images.metropuzzle.com/tmp/rgb-HP1361-3D2-1000px-300dpi_medium.jpeg
3. Dropbox: https://www.dropbox.com/s/al3yzly3m4dqgzb/rgb-HP1361-3D2-1000px-300dpi_medium.jpeg?dl=1
<apex:page renderAs="PDF">
    <div class="productGridContainer">
            <div class="productGridItem">
                <div>
                    <apex:image value="https://cdn.shopify.com/s/files/1/0337/5853/products/rgb-HP1361-3D2-1000px-300dpi_medium.jpeg"/>
                    <apex:image value="http://images.metropuzzle.com/tmp/rgb-HP1361-3D2-1000px-300dpi_medium.jpeg"/> 
                    <apex:image value="https://www.dropbox.com/s/al3yzly3m4dqgzb/rgb-HP1361-3D2-1000px-300dpi_medium.jpeg?dl=1"/> 
                </div>
            </div>
    </div>
</apex:page>

The Shopify Image displays correctly but not the other two...
User-added image

Why is that??
Soundar Raj PonpandiSoundar Raj Ponpandi
Hi Sarah Dickinson,

First image is displaying because it's came from "Content Delivery Network" .  Sometimes Salesforce doesn't allowed external Link form Server.

A Best idea is , You could save that images in static resources and call through static resources. If you have More concern please contact via my whatsup Number +91 - 7418425418 (or) mail me @ sourajking@gmail.com


Regards,

Soundar.
Sarah DickinsonSarah Dickinson
Hi,

Thanks Soundar! I also tried the same test with the same images hosted on Amazon S3, and the image is not dispayed.
If Salesforce does not allow some external URLs and allows others it would be nice to have that documented. Also, if you are not a premium support customer you cannot even create a case for that kind of issue,  but I would really like to have Salesforce weighing in with a definite answer on that issue.

I can see that static resources is the solution in some instances, but we already store thousands of product images on a different server and would like to be able to re-use that to generate the PDFs. It would not make sense to replicate the whole image library in Salesforce as static resources, and I don't even think we would have enough storage for that...


 
Andrzej ChodorAndrzej Chodor
Hi Sarah,

The problem indeed looks a bit complex, as the complexity of the modern security mechanisms over the Internet protocols. Let's try to bite it!

First of all please make sure your CDN host is whitelisted in the Remote Site Settings under Setup > Security Controls. This will allow Salesforce to connect with the remote server for the resource.

There is however a 2nd mechanism called CORS that prevents using resources that the owner (in your case - images.metropuzzle.com) does not meant to reuse in other domains. This means by default you can use your images only in the same domain (metropuzzle.com) and Salesforce rendering engine may block them. To overcome this, try to reconfigure your HTTP server so as it responds with an additional header (you may even want to limit the list of servers to Salesforce):
 
Access-Control-Allow-Origin: *
 
Amazon S3 of course allows is too:
 
https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header

Please let me know if this works for you!
Sharankumar DesaiSharankumar Desai
Hi Sarah,

As per your requirement the images to be displayed on VF PDF are stored as a attachement record in Salesforce system.

All you need to do to access the image is via the record ID using below URL format as below.

https://<your domain>/servlet/servlet.FileDownload?file=<recordID>
Jay HartleyJay Hartley
Sarah, not sure if you are still dealing with this, but according to comments in https://developer.salesforce.com/forums/?id=906F000000094UNIAY and page 95 of the Spring '09 release notes: https://resources.docs.salesforce.com/158/latest/en-us/sfdc/pdf/salesforce_spring09_release_notes.pdf, the Salesforce servers that are rendering the PDF will only call out to sites that are configured in the Remote Site Settings, so follow the same rules as Apex call-outs. When not using renderAs=PDF, the calls to those servers are made in the browser, not Salesforce's servers. Not sure you want to open up access to S3 or Spotify for Apex call-outs, so this might not exactly solve your problem, but that's the constraint for PDF rendering as I understand it.
Akshay_DhimanAkshay_Dhiman
Hi Sarah,

Please try the below code:
<apex:page  renderAs="pdf" >
    <apex:form >
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="3">
              <apex:pageBlockSectionItem >
                    <apex:image url="{!URLFOR($Resource.CALogo, 'CALogo.jpg')}" width="200" height="100" />
                  <br/>
                          <img src="{!$Resource.Velocity}" />

                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Thanks 
Akshay
 
Bullfrog84Bullfrog84

I'm having a similar issue except all my images are stored as contentVersions on the SF server. I'm trying to iterate and display all images with a linked Id matching the record Id. 

 

@Sarah did you happen to get yours to work?

Ajay K DubediAjay K Dubedi
Hi Sarah Dickinson,
You should go with the static resource. Try the below code it will work.
<apex:page renderAs="pdf" applyHtmlTag="false" applyBodyTag="false" showHeader="false" standardStylesheets="false">
    <html>
        <body >
            <!-- <apex:image value="{!URLFOR($Resource.PdfImage)}" width="300" height="40"/>-->
            <img src="{!URLFOR($Resource.PdfImage,'imagePdfFile.png')}" style="height:50px;"/>
        </body>
    </html>
</apex:page>
I hope you find the solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi