0

the below code is not rendering as expected. Can someone help me what is the mistake here.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

    <aura:attribute name="car" type="Object" access="public"
                    default="{'sObjectType' : 'Car__c',
                              'Name' : 'Manish Choudhari',
                              'Picture__c' : '/resource/cars/luxury/ford_mustang.jpeg'}" />
    <lightning:button variant="Neutral" class="tile">    
        <div style="{# 'background-image:url (' + v.car.Picture__c + ')'}" class="innertile">
            <div class="lower-third">    
                <h1 class="slds-truncate">{!v.car.Contact__r.Name}</h1>
            </div>        
        </div>    
    </lightning:button>

</aura:component>

I have updated the static resource file too. But the page is not rendering as expected. This is happening in both standalone application or in app builder. enter image description here

  • What error are you getting in console log? – Dhanik Lal Sahni Jul 27 at 9:50
0
  1. There is issue in getting Picture__c field in div style.

  2. I feel you have to change type of car object also. Instead of object data type, you should use Car__c

Change code like below. It should resolve your issue.

<aura:attribute name="car" type="Car__c" access="public"
                        default="{'sObjectType' : 'Car__c',
                                  'Name' : 'Manish Choudhari',
                                  'Picture__c' : '/resource/cars/luxury/ford_mustang.jpeg'}" />
        <lightning:button variant="Neutral" class="tile">    
            <div style="{! 'background-image:url (' + v.car.Picture__c + ')'}" class="innertile">
                <div class="lower-third">    
                    <h1 class="slds-truncate">{!v.car.Contact__r.Name}</h1>
                </div>        
            </div>    
</lightning:button>
  • i tried by changing the both but no luck. – Krishna N Jul 28 at 6:19
  • instead of contact__r.name can you hardcode value and try. – Dhanik Lal Sahni Jul 28 at 7:13
0

enter image description here

  1. In aura component we dont have sObjectType or SObjectType. It is sobjectType. Ofcourse this will not make any difference for getting image, its required when sending the object to apex for create or update.
  2. Data type Object has a bug in lightning aura component. So use sObject or Car__c.
  3. You need to define other properties like no-repeat, width and cover.
  4. Neutral button will inherit padding, so use base variant

    <aura:attribute name="car" type="sObject" access="public"
                    default="{'sobjectType' : 'Car__c',
                             'Name' : 'Manish Choudhari',
                             'Picture__c' : 'https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg'}" />
    
    
    <lightning:button variant="base" class="tile" >
        <div style="{!'background: url(' + v.car.Picture__c +') no-repeat;background-position: center;background-size: cover;width:6rem;'}">
            {!v.car.Name}
        </div>
    </lightning:button>
    

  • no-repeat, width, cover i specified in style class. tried changing the button also.. Somehow the issue is with style="{! 'background-image:url (' + v.car.Picture__c + ')'}" – Krishna N Jul 28 at 6:43
  • can you show the updated code in question. @KrishnaN – salesforce-sas Jul 28 at 6:52
0

Issue is with the tile class in .css file and sorted out

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.