+ Start a Discussion

ligthing component display avatar image depenting to custom object field value

Hi all,
I am struggling to figure out how to display an avatar image  depenting to custom object field value, we have reclamation custom object with lookup relation with contact and I need to display all relamations related to a contact in lightning component under contact and for each reclamation I need to display a static ressource avatar image depending to the value stored on type__c, see bellow all config:


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" controller="ReclamationListController" access="global" >
    <!-- Handler to call function when page is loaded initially -->
    <aura:handler name="init" action="{!c.getReclamationsList}" value="{!this}" />
    <!-- List of contacts stored in attribute -->
    <aura:attribute name="reclamationList" type="List" />
    <aura:attribute name="type" default="true" type="Boolean"  />
    <!-- Lightning card to show contacts -->
        <lightning:card title="Reclamations">
    <!-- **************************** -->
    <!-- Body of lightning card starts here -->
    <div class="slds-p-around_small">
        <div class="slds-grid slds-wrap">
            <aura:iteration items="{!v.reclamationList}" var="reclamation">
                <span class="slds-avatar">
                <aura:if isTrue="{!reclamation.Type__c} = Retard">                                                                                                      
                  <img alt="Logo" src="{!$Resource.plus}" title="User avatar" />
                      <aura:set attribute="else">
                           <img alt="Logo" src="{!$Resource.Minus}" title="User avatar" />

                <div class="slds-col slds-size_1-of-3 slds-p-around_small slds-box slds-theme_shade slds-theme_alert-texture">
                    <a href="javascript:void(0);">                   
                    <lightning:card title="{!reclamation.Name}" footer="{!reclamation.Type__c}" 
                                    iconName="standard:contact" >
                        <aura:set attribute="actions">
                            <lightning:button name="{!reclamation.Id}" label=" Details" variant="brand"
                        <p class="slds-p-horizontal_small">
                            {!reclamation.Description__c} <br/> {!reclamation.Date__c}
        <!-- Lightning card actions -->
        <aura:set attribute="actions">
            <!-- New button added -->
            <lightning:button label="New" onclick="{!c.newReclamation}" />


    // Function called on initial page loading to get contact list from server
        getReclamationsList : function(component, event, helper) {
        // Helper function - fetchRecalamations called for interaction with server
                helper.fetchReclamations(component, event, helper);

    // Function used to create a new Reclamation
    newReclamation: function(component, event, helper) {
        // Global event force:createRecord is used
        var createReclamation = $A.get("e.force:createRecord");
        // Parameters like apiName and defaultValues are set
            "entityApiName": "Reclamation__c",
            "defaultFieldValues": {
                "Contact__c": component.get("v.recordId")
        // Event fired and new contact dialog open



    // Function to fetch data from server called in initial loading of page
        fetchReclamations : function(component, event, helper) {
        // Assign server method to action variable
        var action = component.get("c.getReclamationList");
        // Getting the contact id from page
        var contactId = component.get("v.recordId");
        // Setting parameters for server method
            contactIds: contactId


        // Callback function to get the response
        action.setCallback(this, function(response) {
            // Getting the response state
            var state = response.getState();
            // Check if response state is success
            if(state === 'SUCCESS') {
                // Getting the list of contacts from response and storing in js variable
                var reclamationList = response.getReturnValue();
                // Set the list attribute in component with the value returned by function
            else {
                // Show an alert if the state is incomplete or error
                alert('Error in getting data');
        // Adding the action variable to the global action queue

Thanks for your help
Best Answer chosen by KARIM EL ALAOUI
Nayana KNayana K
<aura:if isTrue="{!reclamation.Type__c ==  'Retard'}">

All Answers

Nayana KNayana K
<aura:if isTrue="{!reclamation.Type__c ==  'Retard'}">
This was selected as the best answer
Thank you Nayara for your helpresult, You are a PRO
Nayana KNayana K
Thank you so much Karim for these words :)