+ Start a Discussion
Iqra TechIqra 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



 
Deepali KulshresthaDeepali Kulshrestha
Hi Iqra,

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
Iqra TechIqra Tech
i mean how can i call in filed like there are used in Picture__c field

<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>