Question

在完成Lightning组件框架专家superbadge中指定的挑战3时，我面临以下错误。不知道我在这里缺少什么。请建议。

以下是我遇到上述错误的BoatTile组件的代码片段。

 <lightning:layoutItem size="4" padding="around-small">       
     <lightning:button class="tile"> <!-- [more code here] -->
       <div class="innertile" style="{!'background-image:' + 'url(' + v.bgUrl+')'}"> <!--[set image as background here] -->
            <div class="lower-third">
                <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
            </div>
        </div>
    </lightning:button>
</lightning:layoutItem>

此致 Dipak N

Answer 1

Dipak，看起来你的CSS不正确。请分享您的css文件，然后我可以提出任何建议。或者与下面的一个进行比较。

Answer 2

我遇到了同样的问题，这是我朋友的帮助，这是Boat Tile组件：

<lightning:button class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}">
    <div style="{! 'background-image:url(\'' + v.boat.Picture__c + '\'); '}" class="innertile">
        <div class="lower-third">
            <h1 class="slds-truncate">
                {!v.boat.Contact__r.Name}
            </h1>
        </div>  
    </div>
</lightning:button>

这是Boat Tile CSS：

.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;}

.THIS .tile .tile selected{
border: 3px solid rgb(0, 112, 210);}

这是船搜索结果组件：

<lightning:layout multipleRows="true" class="slds-align_absolute-center">
    <aura:iteration items="{!v.boat}" var="boat">
        <lightning:layoutItem flexibility="auto" size="3" padding="around-small">
            <c:BoatTile boat="{!boat}"
                        selected="{!equals(v.selectedBoatId, boat.Id) ? 'true' : 'false'}"/>
        </lightning:layoutItem>
    </aura:iteration>
    <aura:if isTrue="{!v.emptyBoatList}">
        <div>
            No boats found
        </div>
    </aura:if>
</lightning:layout>

Answer 3

@dipak，您好，请使用此CSS，让我们知道这是否可以解决问题

.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;
}

Superbadge：Lightning组件框架专家 - 第3步

3 个答案: