如何使用设计属性从社区中的静态资源提供图像路径

Question

我正在尝试使用社区静态资源中的图像，使用设计属性，例如 <img src="{!$Resource.DealRegChannelRedDot}"/>

但它不是 working.it 显示为空白，如路径不正确

<!-- Component -->
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <aura:attribute name="showBannerImage" type="boolean" default="" access="global"/>
    <aura:attribute name="bannerImage" type="String" default="" access="global" />
    <div class="container">
        <aura:if isTrue = "{!v.showBannerImage}">
            <aura:unescapedHtml value="{!v.bannerImage}"/>
        </aura:if>
    </div
</aura:component>


<!-- Design -->
<design:component>
    <design:attribute name="showBannerImage" label="Show Banner Image" />
    <design:attribute name="bannerImage" label="Banner Image" />
</design:component>

有没有办法使用静态资源实现此目的

Answer 1

如果您已经在静态资源中上传了图片。 setup>static resources 然后你可以像 <img src="{!'/sfsites/c/resource/'+YOUR_STATIC_RESOURCE_NAME}"/>

一样访问图像

当您尝试使用 Design property 访问图像时，您可以使用以下 Lightning 代码：

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <aura:attribute name="showBannerImage" type="boolean" default="" access="global"/>
    <aura:attribute name="bannerImage" type="String" default="" access="global" />
    <div class="container">
        <aura:if isTrue = "{!v.showBannerImage}">
            <img src="{!'/sfsites/c/resource/'+v.bannerImage}" style="width: 100%;" />
        </aura:if>
    </div
</aura:component>

你的闪电设计看起来会一样

<design:component>
    <design:attribute name="showBannerImage" label="Show Banner Image" />
    <design:attribute name="bannerImage" label="Banner Image" />
</design:component>

现在您只需在 showBannerImage 属性中调用您的静态资源名称。例如，如果您的静态资源名称是 imageResource 那么您只需在 community lightning page attribute.

中简单地调用此名称

P.S。如果我的回答对您的问题有所帮助，请设为最佳答案。它将帮助其他人找到最佳答案。

如何使用设计属性从社区中的静态资源提供图像路径

How to give Image path from Static Resource in Community using Design Attribute

salesforce

salesforce-communities

salesforce-lightning