function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ 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 Rajan PonpandiSoundar Rajan 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 Rajan PonpandiSoundar Rajan 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  
Matt Foster..ingMatt Foster..ing
Hello All,

We have had this issue in getting an image, saved as a file to load to visualforce page rendered as PDF. It now shows a broken link image.

User-added image

We used the /sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=<ContentVersionId> URL in the src attribute of <apex:Image> tags to display images on the page, which unexpectedly stopped working. Images rendered with the above URL (with a valid ContentVersion ID) resulted in a broken image.

To resolve this, these links were replaced with /sfc/servlet.shepherd/version/download/<ContentVersionId>, which allowed the images to properly render on the page.

This started happeing late last week around 1/17/2020, there were no code changes. 

Any feedback would be greatly appreciated.

Thanks
Shaun Emmett 6Shaun Emmett 6
Hi all

I too am having issues. A couple of external sites, dropped all components due to an update in Winter 20 relating to profiles which had Custom Meta Data. Once added to the profiles, this brought in elements back into the EOL Letter we are producing. 

Having said this, one URL will pull through images into the document with no issue, however another URL isn't able to pull through their images into the same document. Any ideas one why this would be?

The URL's are correct in the remote site settings, but I am unaware of any other critical updates which may impact the image rendering when the Visualforce page built denotes "renderAs"=PDF

Any ideas would be apprecaited.

Cheers

Shaun
Alex Aguilar MBAlex Aguilar MB
Hi,
I've faced this problem recently and managed to solve it using "ContentDistribution" object. I will try to describe steps taken:

1. First modify your user/s profile and enable "Create delivery content" under administrative permissions
2. Create new contentDistribution object, associating your contentVersionId on the related field (same name)
3. Once created, this object will have fields with a public URL where you can access your file ("ContentDownloadUrl" and/or "DistributionPublicUrl")

Use publicURL on your VF and you'll see it is, at last, rendered.

It was a very tought problem for me to solve, but I've managed to get it working.

Regards,
Alex
Luke ButhmanLuke Buthman
My requirement was a bit simpler. There is a Google API (https://developers.google.com/chart/infographics/docs/qr_codes) that creates QR codes, and I wanted to an image to render in the PDF. The image was always broken. I added Google's url to Remote Site Settings, created a formula field to give me the url value of the Google API + Id, and then did this:
<apex:image url="{!plant.QR_Value__c}" height="50" width="50"/>
Worked like a charm!