function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sandeep YadavSandeep Yadav 

Lightning Component Framework Specialist : Boat images are not coming in BoatTile Component

Hi All,

I am facing issue for setting Boat images in style tag in BoatTile Component.

Here is BoatTile component and respective CSS.
BoatTile.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	
    <aura:attribute name="boat" type="Boat__c" default="{
                                                        'sObjectType' : 'Boat__c',
                                                        'Name' : '',
                                                        'Picture__c' : '',
                                                        'Contact__c' : ''
                                                        }"/>
    
    <aura:registerEvent name="selectedBoat" type="c:BoatSelect" />
    
    <lightning:button class="tile" >
    	<div style="{!'background-image:url(\'' + v.boat.Picture__c + '\'); '}" class="innerTile">
        	<div class="lower-third">
            	<h1 class="slds-truncate">{!v.boat.Contact__r.LastName}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>


BoatTile.css

.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}
.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}



any suggestion on setting background-image ??

Regards
Sandeep
ajay Duggi(Heptarc)ajay Duggi(Heptarc)
Dear Sandeep,

Try below code once.
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="boat" type="Boat__c" />
        <lightning:button class="tile">
            <!-- Image -->
            <div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
              <div class="lower-third">
               <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
              </div>
            </div>
        </lightning:button>

</aura:component>

.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}

.THIS .innertile {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}
Let me know if problem resolves.