Display qr code image from formula field in LWC

Question

I have this formula field that shows the generated qr code on the record detail page:

IMAGE('https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://www.yahoo.com' ,'QR code to open yahoo')

I need to display this qr code in an lwc. Adding it as a text field shows the code above. Using IMG and setting the value as src doesn't work either.

js

@wire(getEval, { recordId : '$recordId' })
eDetails({ data, error }){
    if(data){
        this.nameOnCard = data.Name_on_Card__c;
        this.qrCode = data.QR_Code__c;
    }else if(error){
        console.log('ERROR ----- ', JSON.stringify(error));

    }
}

HTML:

                        <div class="slds-grid" >
                            <div class="slds-col slds-truncate">
                                <img src={qrCode}>
                            </div>
                        </div>

****Update From the console, I can see the value of qrCode is:

<img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=https://www.yahoo.com" alt="SQR code to open yahoo" border="0"/>

so it looks like it's ready to just work. . . no need to add to img tag as src. Problem is, it just displays the value above when I need it to render the HTML contained in qrCode.

Any ideas on how to display the actual qr code (like on the record detail page) in an LWC?

Answer 1

As you noted the IMAGE function outputs an img tag, but you could extract both the src and alt attribute from that string via substring(startIndex, endIndex) function:

alternateText;

@wire(getEval, { recordId : '$recordId' })
eDetails({ data, error }){
    if(data){
        this.nameOnCard = data.Name_on_Card__c;
        const srcStartIndex = data.QR_Code__c.indexOf('src="') + 5;
        const srcEndIndex = data.QR_Code__c.indexOf('"', srcStartIndex);
        this.qrCode = data.QR_Code__c.substring(srcStartIndex, srcEndIndex);
        const altStartIndex = data.QR_Code__c.indexOf('alt="') + 5;
        const altEndIndex = data.QR_Code__c.indexOf('"', altStartIndex);
        this.alternateText = data.QR_Code__c.substring(altStartIndex, altEndIndex);
    }else if(error){
        console.log('ERROR ----- ', JSON.stringify(error));
    }
}

Then in the template you could have:

<div class="slds-grid" >
    <div class="slds-col slds-truncate">
        <img src={qrCode} alt={alternateText}>
    </div>
</div>

Answer 2

As I mentioned in my comments, you could use <img src={qrCodeUrl}>. Here I put it together as a draft, but technically it should work.

HTML:

<template>
<lightning-card title="QR Code" icon-name="action:scan_enabled">
    <div class="slds-grid">
        <div class="slds-col slds-truncate">
            <img src={qrURLData}>
        </div>
    </div>
</lightning-card>
</template>

JS:

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import QR_CODE from '@salesforce/schema/Contact.QRCode__c';

export default class LwcQRCodeDemo extends LightningElement {
@api recordId;
qrCodeUrl;

get qrURLData(){
    if(this.qrCodeUrl){
        return this.qrCodeUrl;
    } else{
        return null;
    }
}

@wire(getRecord, {recordId: '$recordId', fields: [QR_CODE]}) handleDataRes(response){
    if(response){
        let qrCodeField = getFieldValue(response.data,QR_CODE);
        if(qrCodeField){
            let qrURL = qrCodeField.split('(')[1].split(',')[0].split("'")[1]; 
            this.qrCodeUrl = qrURL;
        }
        
    } else{
        console.log('Error within Wire');
    }
  }
}

You have to ensure you properly wire the data coming from your custom field and extract it using a split/regex or other JS string operation.

Result:

I've used my Trailhead account. Added a RecordPage LWC to display the QR Code on the Contact record page.