+ Start a Discussion
Jayesh Shewale12345Jayesh 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.
Maharajan CMaharajan C
HI Jay,

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