How to Show Image in Salesforce LWC Data Table?

In Salesforce LWC data tables, when we display data, we use the type parameter to define the data type of the column field. For example, to display a currency field, we will use type: currency. In the LWC lightning data table, we don’t have a default type to display an image in the data table column.

We need to define a custom data type to display an image in the data table. In this Salesforce tutorial, we will learn how to show an image in a Salesforce LWC data table.

Show Images in Salesforce LWC Data Table Column

To display the image in an LWC table column, we have two options: either we can make a callout in the LWC component from an open-source API, or we can call the Apex method to display the images of a specific object in the data table.

In the example below, we will display the image column in the LWC data table for the following methods.

• Show Images in Salesforce LWC Data Table Column via API calling from an external open-source
• Show Images in Salesforce LWC Data Table Column via Apex calling for internal objects.

Show Images in Salesforce LWC Data Table Column via API Calling

In the example below, we will create an LWC component with an extended Lightning datatable class, in which we will define a static property of custom type for the image column.

In the example below, I will fetch a product list from the API and show it in the LWC data table. To get the data in the table, we can use the Apex class callout or the fetch API method to call the third-party API.

In this example, I’m using Open API to get a list of products along with images.

To make the API call directly in the LWC component, we need to add the API domain to the trusted URLs. After this, follow the steps below

To enter a site on trusted URLs, navigate to the Setup> Trusted URLs > Enter the API Name and URL > mark it as active, and click Save.

After setting up the trusted URL for the third-party API, follow the steps below to display the image from the fetched API in the data table.

1. Create an LWC component with an extended Lightning data table and define the column array as shown in the code below.

import { LightningElement } from 'lwc';

const COLUMNS = [
    { label: 'Title', fieldName: 'title' },
    { label: 'Description', fieldName: 'description' },
    { label: 'Price', fieldName: 'price', type: 'currency' },
    { label: 'Image', fieldName: 'image', type: 'customImage' }
];

export default class ProductList extends LightningElement {
    columns = COLUMNS;
    products = [];

    connectedCallback() {
        this.getProducts();
    }

    async getProducts() {
        const response = await fetch('https://fakestoreapi.com/products');
        if (response.ok) {
            this.products = await response.json();
        }
    }
}

2. Enter the code below in the HTML to render the product fetched from the open API.

<template>
    <lightning-card title="Products" icon-name="standard:product">
        <div class="slds-var-p-around_medium">
            <c-enhanced-data-table key-field="id" data={products} columns={columns} hide-checkbox-column="true"></c-enhanced-data-table>
        </div>
    </lightning-card>
</template>

The <c-enhanced-data-table …></c-enhanced-data-table> tag uses the enhancedDataTable component, configured with key-field=”id” to set the row identifier, data={products} to bind the product data, and columns={columns} to define the table columns.

It embeds the custom datatable in a card, passing data and settings to display products.

3. Enter the code below in the meta.xml file to make the component visible to the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Create another LWC component and enter the code below in the JS file.

This component will inherit the Lightning table class, and here we can customise the data table.

import LightningDatatable from 'lightning/datatable';
import customImage from './customImage.html';

export default class EnhancedDataTable extends LightningDatatable {
    static customTypes = {
        customImage: {
            template: customImage,
            typeAttributes: ['title']
        }
    };
}

In the above code, we have a static property customTypes that registers a custom column type called customImage for the datatable.

In this section, we customise the datatable with static customTypes = { customImage: { template: customImage, typeAttributes: [‘title’] } };. The static customTypes property defines a new column type called customImage.

It uses template: customImage to link to the imported customImage.html file for rendering an image and typeAttributes: [‘title’], which enables the data table to display a customImage column for images.

5. In the second LWC component, I have created another HTML file to display the product image in the data table.

<template>
    <img src={value} title={typeAttributes.title} 
    class="slds-avatar slds-avatar_circle slds-avatar_large"
    alt="Product Image" />
</template>

This template will render an <img> in the customImage column, with src={value} setting the image URL, title={typeAttributes.title} adding a tooltip, SLDS classes (slds-avatar slds-avatar_circle slds-avatar_large) styling it as a large image.

6. Now, deploy the LWC component to the Lightning page and there you will see that using the fetched API data, we have displayed product records along with images.

This way, we can display the image column in Salesforce LWC data table via third-party API calling and using an open-source API.

Show Images in Salesforce LWC Data Table Column via Apex Calling

In this method, we will display an image on the LWC data table via Apex calling. In this example, I have a custom URL field Item_Image__c in the Opportunity object.

The URL field contains the image URL from the external link, and in the LWC data table, we will display the images fetched from the URL.

Follow the steps below to display images in the LWC data table via the Apex calling method.

1. Create a controller class to fetch the records from the opportunity object and the custom image URL field.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunityList() {
        return [SELECT Id, Name, Amount, StageName, Item_Image__c 
                FROM Opportunity 
                WHERE Item_Image__c != NULL 
                LIMIT 10];
    }
}

In the controller class, we have added the condition Item_Image__c != NULL to ensure that the table shows only records with images.

2. Create an LWC component and enter the code below in the JS class.

import { LightningElement, wire } from 'lwc';
import getOpportunityList from '@salesforce/apex/OpportunityController.getOpportunityList';

const COLUMNS = [
    { label: 'Opportunity Name', fieldName: 'Name' },
    { label: 'Amount', fieldName: 'Amount', type: 'currency' },
    { label: 'Stage', fieldName: 'StageName' },
    { label: 'Item Image', fieldName: 'Item_Image__c', type: 'customImage', typeAttributes: { class: 'slds-avatar_large' } }
];

export default class OpportunityList extends LightningElement {
    columns = COLUMNS;
    opportunities = [];

    connectedCallback() {
        console.log('Columns initialized:', JSON.stringify(this.columns));
    }

    @wire(getOpportunityList)
    wiredOpportunities({ error, data }) {
        if (data) {
            console.log('Opportunities data:', JSON.stringify(data));
            this.opportunities = data;
        } else if (error) {
            console.error('Error fetching opportunities:', error);
        }
    }
}

This main LWC component sets up a table with columns for the opportunity fields, including images. The Item_Image__c column uses a special type called customImage to show pictures.

The CSS styling typeAttributes: { class: ‘slds-avatar_large’ } will make the image icons big for better visibility in the data table.

We have called the Apex method to get the Opportunity data and store it in the data table.

3. After this, enter the code below in the HTML file.

<template>
    <lightning-card title="Opportunities with Product image">
        <div class="slds-var-p-around_medium">
            <c-enhanced-data-table 
                     key-field="Id" 
                     data={opportunities} 
                     columns={columns} 
            hide-checkbox-column="true">
        </c-enhanced-data-table>
        </div>
    </lightning-card>
</template>

This HTML template uses the <c-enhanced-data-table> tag, which uses another component we’ll make to show the table. It uses opportunities for the data, columns for the table setup, and an ID to identify each row.

4. Create another LWC component, enhancedDataTable, and enter the code below in the JS file. This component will be the helper component that displays images in the first LWC component data table.

import LightningDatatable from 'lightning/datatable';
import customImage from './customImage.html';

export default class EnhancedDataTable extends LightningDatatable {
    static customTypes = {
        customImage: {
            template: customImage,
            typeAttributes: ['title', 'class']
        }
    };
}

In this code, we have added a new type to display an image that is customImage. This type uses a separate HTML file (customImage.html) to show the image in a table. The typeAttributes allow us to add extra details like a title or style.

5. Create an HTML template customImage.html in the same LWC component to define the logic of rendering an image in the LWC data table.

<template>
    <img src={value} title={typeAttributes.title} class={typeAttributes.class} alt="Item Image" />
</template>

This template uses src={values} to get the URL from Item_Image__c and display the image.

6. Enter the code below in the meta.xml file where you have called the apex method to make the component available for the Lightning pages.

<isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

7. Deploy the LWC component on the Lighting page, and there you will see the LWC data table with images of respective records in the Item Image column.

This way, we can display the image column in Salesforce LWC data tables via the Apex calling method and using the URL image fields.

Conclusion

In this Salesforce tutorial, we have learned how to add an image column to a Salesforce LWC data table by following the above method. We have also learned about two methods for displaying images in the LWC data table, where we displayed images using the third-party open API by using the fetch API method and a helper component.

After this, we displayed images from the custom URL field of the opportunity object, where we fetched the records via the Apex calling method.

You may also like to read:

• Display Icons in a Lightning Datatable in LWC
• Add Related Fields Columns in Salesforce LWC Data Table
• Decorators in Salesforce Lightning Web Component(LWC)
• Dynamic Filters for Salesforce LWC Lightning Datatable
• Salesforce LWC Lightning Data Table With Search Bar

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.