I am following the pattern I found in the LWC recipes:


Specifically, I am trying to display an image from a custom object. I have created a formula that pulls the image from Documents. It displays just fine on the standard Lightning record page, but when I try to pull the image in a LWC, when the page renders I get a broken image icon.

The formula field returns text, and as I mentioned, shows the correct image on a standard Lightning record page:

IMAGE("/servlet/servlet.FileDownload?file=0154T000000hC94", "Default", 256, 256)

When I inspect the rendered HTML (component is on custom object standard lightning page), I can see that an <img> tag is added but its src is another complete version of the <img> tag, not the actual src I need :

<img src="<img src="/servlet/servlet.FileDownload?file=0154T000000hC8p&quot; alt="Company Overview"; style="height:256px; width:256px" border="0"/>">

It seems like it is not parsing correctly. Here is the LWC snippet, used inside a <lightning-accordion-section> in a larger template component:

<lightning-accordion allow-multiple-sections-open>
    <template for:each={company.Cards__r} for:item="card">
        <lightning-accordion-section key={card.Id} name={card.Name} label={card.Name}>
                <lightning-layout vertical-align="center">
                        <img src={card.Thumbnail_Image__c}></img>
                    <lightning-layout-item padding="around-small">

Any idea why I am doing wrong, and why I am getting nested <img> tags?

  • I have also added the two formats (file in Documents or file in Files) of image tags directly to the page. They show up just fine, the issue is in th rendering of the image tage with src={some object property}. – Kurt Fairfield Nov 5 at 20:27
  • <img src="/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=0684T000000BKyO&operationContext=CHATTER&contentId=05T4T0000034BTi"/> – Kurt Fairfield Nov 5 at 20:28
  • <img src="/servlet/servlet.FileDownload?file=0154T000000hC8p" alt="Company Overview" style="height:256px; width:256px" border="0"/> – Kurt Fairfield Nov 5 at 20:29

The formula presumes it will be displayed in Classic or otherwise just show the basic HTML (e.g. Visualforce). This isn't true in your current situation, because you've encoded the HTML directly in to the src attribute. I'd expect this exact behavior. That said, I don't think there's an easy workaround, since you can't just "drop in" raw HTML. Instead, you'll need to parse out the URL from the HTML fragment in order to show the value correctly.

  • Great, thanks @sfdcfox. That is exactly what I was doing wrong! I changed my formula to output the parsed location of the image, rather than an use the IMAGE() formula. I appreaciate your help very much! – Kurt Fairfield Nov 5 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.