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" 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?