You need to sign in to do that
Don't have an account?
Iqra Tech
i am getting image on my lightning application
CarTile (Component):-
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="car" type="Object" access="public"
default="{
'sObjectType' : 'Car__c',
'Name' : 'Amjad',
//'MyOwnField' : 'My Filed Example',
'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>
style class:-
.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;
}
in static resource i store the zip file cars floder having luxury folder under that having ford_mustang.jpeg
i am trying to impliment Rent a car application i follw this steps to impliment Rent a car application i am just stuck in this part
where did i missed somthing?
it is not disapolying image on lightining application
see this scrren shot
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="car" type="Object" access="public"
default="{
'sObjectType' : 'Car__c',
'Name' : 'Amjad',
//'MyOwnField' : 'My Filed Example',
'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>
style class:-
.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;
}
in static resource i store the zip file cars floder having luxury folder under that having ford_mustang.jpeg
i am trying to impliment Rent a car application i follw this steps to impliment Rent a car application i am just stuck in this part
where did i missed somthing?
it is not disapolying image on lightining application
see this scrren shot
Greetings to you!
You can create a very simple lightning component to display image from a static resource or attachment/file
Static resource:-
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<img src="{!$Resource.StaticResourceName}"/>
</aura:component>
if you are using attachment or file. View attachment and use that URL like this::-
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<img src="https://uditjain--dev2--c.cs68.content.force.com/servlet/servlet.FileDownload?file=00P1D000000Iiyd"/>
</aura:component>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="car" type="Object" access="public"
default="{
'sObjectType' : 'Car__c',
'Name' : 'Amjad',
//'MyOwnField' : 'My Filed Example',
'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>