Image will not display in LWC - nested src issues

Question

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

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_create_dispatch

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">
                    <lightning-layout-item>
                        <img src={card.Thumbnail_Image__c}></img>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small">
                         <p>{card.Name}</p>
                    </lightning-layout-item>
                </lightning-layout>
         </lightning-accordion-section>
     </template>
</lightning-accordion>

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

Answer 1

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.

Answer 2

const parser = new DOMParser();   
const document = parser.parseFromString(record['formulaImage__c'], "text/html");    
const els = document.getElementsByTagName('img');    
record[field.fieldName] = els[0].getAttribute('src');