+ Start a Discussion
sumit suwalkasumit suwalka 

Showing image in lightning data table

Hi All,
i have created a lightning component having lightning data table in which i am showing fields of custom object.
I have a formula field called Division having image, i want to show this in data table but its giving me only image source.like this:-<img src="/servlet/servlet.FileDownload?file=01541000001xSd8" alt=" " border="0"/>
i want to show image on it.
here is my component showing fields of custom objectUser-added imagei want to show image on it.
my controller is given below:-
({
    doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Name', fieldName: 'linkName', type: 'url', 
             typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
             {label: 'Division', fieldName: 'Division1__c', type: 'image'}, //here its showing only source
            {label: 'Sister Account', fieldName: 's1', type: 'text'},
            {label: 'Sister Account', fieldName: 's2', type: 'text'},
            {label: 'State', fieldName: 'State__c', type: 'text'},
            {label: 'Type', fieldName: 'Type__c', type: 'text'},
            {label: 'Owner', fieldName: 'Oid', type: 'text'}
        ]);
        
        var action = component.get('c.fetchRecords');
        var recordId =  component.get("v.recordId");
        action.setParams({rid : recordId});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s1 = row.Sister_Company__r.Name;
                }
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s2 = row.Sister_Company2__r.Name;
                }
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.Oid = row.Owner.Name;
                }
                 
                allValues.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                 console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    removeRow : function(component, event, helper){
        var selRows = event.getParam('selectedRows');
        
        // Remove the record from the table
        var rows = component.get('v.mydata');
        for (var i = 0; i<selRows.length; i++){    
            var rowIndex = rows.indexOf(selRows[i]);
            console.log('rowIndex---->>> ' + rowIndex);
            var r=rows.splice(rowIndex, 1);   
            
            console.log('rrr---->>> ' + JSON.stringify(r));
            component.set('v.mydata', rows);
        }
    },
 
})
how to get image in the field?
what am i missing?
Anu suggestions?
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sumit,

Greetings to you!

Unfortunately, this is not possible as of now. There's an idea which is active on the success community with a similar discussion for which you can upvote so that it gets available in the future.

https://success.salesforce.com/ideaView?id=0873A000000lKqxQAE

Please refer to the below link which might help you further with the above requirement.

https://salesforce.stackexchange.com/questions/231226/how-do-i-get-lightningdatatable-to-do-some-undocumented-thing-x

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Athira PUAthira PU
Hi Sumit,

Checkout this

COMPONENT
<aura:component controller="AccountImage" >
   <aura:handler name="init" value="{!this}" action="{!c.getMyObjects}" />
    <aura:attribute name="image" type="Account[]" />
    <aura:iteration var="AccImg" items="{!v.image}">
    <p>{!AccImg.Name},
    <aura:unescapedHtml value="{!AccImg.Picture__c }" /></p>
</aura:iteration>
</aura:component>
CONTROLLER
({
    getMyObjects : function(component) {
        var action = component.get("c.getImage");      
        action.setCallback(this, function(response) {    
            var state = response.getState();        
            if (component.isValid() && state === "SUCCESS"){
                var resultData = response.getReturnValue();
                console.log(resultData);
                component.set("v.image", resultData);
            }            
        });
        $A.enqueueAction(action);
        
    }
})
APEX CONTROLLER
public class AccountImage{
    public AccountImage()
    {}
    @AuraEnabled
    public static List<Account> getImage(){
         list<Account> ImageList=[select Name,Picture__c from Account];
        return ImageList;
    }
    
}
Also go through the link https://help.salesforce.com/articleView?id=000327122&type=1 

Thanks
Athira.P.U