Unable to load background image for lightning:button

Question

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.

Answer 1

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>

Answer 2

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>
   

Answer 3

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