0

This question already has an answer here:

In my below lightning component , I am trying to display an image using background image tag.

<div class="imageview" style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}" />

I do see that the picture is retrieved and the URL is set to a picture location stored in my org. The screen shot below proves that. The right portion of Details tab should display an image.

enter image description here

enter image description here

I am not sure why the image is not getting displayed. Here is the content of my component and it's CSS>

<aura:component description="BoatDetail">
    <aura:attribute name="boat" type="boat__c"/>
    <div class="Record Details">
        <lightning:card iconName="utility:anchor" title="{!v.boat.Contact__r.Name + '\'s boat'}" >
            <lightning:layout horizontalAlign="space" multipleRows="true">
                <lightning:layoutItem size="6" padding="around-small">
                    <div class="slds-p-horizontal--small">
                        <div class="boatproperty">
                            <span class="label">Boat Name:</span>
                            <span>{!v.boat.Name}</span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Type:</span>
                            <span>{!v.boat.BoatType__r.Name}</span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Length:</span>
                            <span>{!v.boat.Length__c} ft</span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Est. Price:</span>
                            <span><lightning:formattedNumber value="{!v.boat.Price__c}" style="currency" currencyCode="USD"/>
                            </span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Description:</span>
                            <span>{!v.boat.Description__c}</span>
                        </div>
                    </div>

                </lightning:layoutItem>
                <lightning:layoutItem size="6" padding="around-small">
                    <div class="imageview" style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}" />
                </lightning:layoutItem>
            </lightning:layout>
        </lightning:card>
    </div>
</aura:component>

CSS:

.THIS.label {
    font-weight: bold;
    display: block;
}

.THIS.boatproperty {
    margin-bottom: 3px;
}

.THIS.imageview {
    background-repeat: no-repeat;
    background-size: contain;
    height: 200px;
    margin: 2px;
}

This component is contained in a parent component:

<aura:component implements="flexipage:availableForAllPageTypes" description="BoatDetails">
    <aura:handler event="c:BoatSelected"
                  action="{!c.onBoatSelected}"/>
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="Id" type="Id"/>
    <aura:attribute name="recordLoadError" type="String"/>

    <force:recordData aura:id="recordLoader"
                      recordId="{!v.Id}"
                      layoutType="FULL"
                      targetFields="{!v.boat}"
                      targetError="{!v.recordLoadError}"
                      recordUpdated="{!c.onRecordUpdated}"
                      mode="VIEW"
    />


    <aura:if isTrue="{!not(empty(v.boat))}">
    <lightning:tabset>
        <lightning:tab label="Details">
            <c:BoatDetail boat="{!v.boat}"/>
        </lightning:tab>
        <lightning:tab label="Reviews">
            Reviews
        </lightning:tab>
        <lightning:tab label="Add Review">
            Add Review
        </lightning:tab>
    </lightning:tabset>
    </aura:if>
</aura:component>

marked as duplicate by glls, sfdcfox, Ratan Paul, Oleksandr Berehovskyi, Himanshu Dec 26 '17 at 11:48

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • try checking the network tab when the page loads (dev tools) you should see the status of the resource on page load – glls Dec 25 '17 at 20:48
  • Yes, Did see the resource that it has been loaded. Status shows 200. – Arnold Dec 25 '17 at 20:50
  • maybe there is a css rule which results in this behavior. – glls Dec 25 '17 at 20:53
  • any particular reason you are using background-image? – glls Dec 25 '17 at 20:55
  • I am solving a superbadge problem and the instruction to pass is to use a background image. <div class="imageview" style="[set image as background here]" />. It is annoying that I can pass the challenge only if it is done in a specific way that the trailhead bot wants. How can I find the issue with the css? I am not an expert with css. – Arnold Dec 25 '17 at 21:05
4

Your CSS selector is apparently incorrect. It should be:

.THIS .imageview {

Instead of:

.THIS.imageview {

Use the latter for top-level elements, and the former for nested elements, such as those found in a lightning:layoutItem.

You'll also note that your labels are not bold, because you've used .THIS.label instead of .THIS .label. You should almost always end up using that space.

  • Indeed that was the problem – Arnold Dec 26 '17 at 17:20

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