0

I have a lightning component that shows the image of a car from the static resource. I have uploaded this zip file which contains images of cars as a Static resource. following is the code of the lightning component.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name ="car" type="Car__c" access="public" 
                    default= "{
                              'sObjectType' : 'Car__c',
                              'Name' : 'Aditya',
                              'Picture__c' : '/resource/cars/luxury/ford_mustang.jpeg'}"/>
    
    <lightning:button variant="neutral" >
        <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>

and CSS file

.THIS .tile{
    position:relative;
    display:inline-block;
    width:100%;
    height:500px;
    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;
}

Note: Picture__c is a URL(255) field.

and when I run the code, the image is not getting displayed. Please refer to the below screenshot. enter image description here

am I missing anything? Please advise.

0

As you use zip file as static resource so please refer my example I created a Sun folder with 2 images inside sun1.jpg and sun2.jpg, I zipped it to Sun.zip and upload it Static Resource as Name is Sun enter image description here

And on the Aura component you can use use the images inside like this enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.