Apex Code Development You need to sign in to do that
Don't have an account?
Jayesh Shewale12345 creating lightning component having image
Hi,
I want to create one lightning component which will show the image stored in object record.
Actual scenario is as follows:
there is one object called car(Car__c)
And car object has one field 'Picture__c'(data type- url)
I just want to show the image stored in the record of car object.
I tried as follows:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name = "car"
type = "object"
default = "{
'sObjectType' : 'Car__c',
'Name' : 'Jayesh',
'Picture__c' : '/resources/cars/luxury.image/png'
}"/>
<lightning:button variant = "neutral" class = "title"/>
<div style="{!'position: relative; height: 30vh; background:' + v.backgroundColor + ' url(' + $Resource.carTile+') no-repeat;background-position: center;background-size: cover;'}">
</div>
</aura:component>
Please help.
I want to create one lightning component which will show the image stored in object record.
Actual scenario is as follows:
there is one object called car(Car__c)
And car object has one field 'Picture__c'(data type- url)
I just want to show the image stored in the record of car object.
I tried as follows:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name = "car"
type = "object"
default = "{
'sObjectType' : 'Car__c',
'Name' : 'Jayesh',
'Picture__c' : '/resources/cars/luxury.image/png'
}"/>
<lightning:button variant = "neutral" class = "title"/>
<div style="{!'position: relative; height: 30vh; background:' + v.backgroundColor + ' url(' + $Resource.carTile+') no-repeat;background-position: center;background-size: cover;'}">
</div>
</aura:component>
Please help.
The component should be like below:
Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >
<aura:attribute name="Car" type="Car__c" access="public" default="{
'sObjectType' : 'Car__c',
'Name' : 'Maharaj',
'Picture__c' : '/resource/cars/sports/Jaguar_F_type_Coupe.jpg'}"/>
<lightning:button Variant="Neutral" class="tile" >
<div style="{# 'background-image:url('+ v.Car.Picture__c +')'}" class="innertile">
<!-- <div style="{! 'background-image:url(/resource/cars/sports/Jaguar_F_type_Coupe.jpg)'}" class="innertile"> -->
<div class="lower-third">
<!-- <h1 Class="slds-truncate">{!v.Car.Contact__r.Name}</h1> -->
<h1 Class="slds-truncate">{!v.Car.Name}</h1>
</div>
</div>
</lightning:button>
</aura:component>
CSS:
.THIS.tile {
position: relative;
display: inline-block;
width: 100%;
height: 220px;
padding: 1px;
}
.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, 0.4);
padding: 6px 8px;
}
Thanks,
Maharajan.C