Visualforce Email Templates -- How do I display images in my use case?

Question

I am making Visualforce email templates for a client. Some of the emails contain a section with recommended products at the bottom, which is just an image and item name displayed in a table in a row. Both of these things are links to the item on the client’s webstore. I am trying to make a solution in which the client only has to update one place to update recommended products, rather than having to update each email template individually with new recommended products.

Currently, images for the recommended products are stored as static resources. Recommended products are stored as records in a custom setting list. Each record has a field for product name (text area), static resource name (text), and product page URL (URL). A controller creates a list of the values of the recommended product records from the list. A component loops through and displays a table of recommended products. The component is then included in the email template.

In the component, this is the code line that displays the images: <img src="{!URLFOR($Resource[rec.StaticResourceName__c])}"/>. With this code, the images for the products display only in the HTML preview window and not in the actual email that gets sent.

If I hard code an external image, the images display properly. I think it’s an access issue, but I’m not sure what the solution is.

In a previous version of the code, recommended product images were stored as files/documents with a public link generated for them. There was a URL-type field on the custom setting list, “ProductImage”, which contained these public links. The images were then displayed in the component with this code line: <img src="{!rec.ProductImage__c])}"/>.

In this code version, the images did not display in the HTML preview window OR the email that got sent.

I am not sure what a solution would be. The code works fine apart from the image; the component with a hardcoded image displays and functions how I want. Am I missing something? Is there another solution I should look at?

Thank you!

Answer 1

Save the product images as Documents and make them externally available. Instead of having the static resource name on the custom setting, create a field which stores the document id. Reference this field in the email template.

Try this. <img src="https://mydomainname.my.salesforce.com/servlet/servlet.ImageServer?id={!rec.DocumentId__c}&oid=<<Organization ID>>"/>

Replace https://mydomainname.my.salesforce.com with your domain url.

Replace <<Organization ID>> with your org id.

Answer 2

@DonDiesel, unfortunately static resource can't be seen publicly (even though cache control is public). The reason your preview works while using the static resource because you have active session.

Best way to show the image in emails, is to use either File or Documents (and make them public).

Create reusable <Apex:component> which takes either document name or Id as parameter and then render image.