Search code examples
salesforcesalesforce-lightningsalesforce-communities

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

enter image description here

enter image description here

I am trying to use Image from Static resource in Community using Design Attribute like <img src="{!$Resource.DealRegChannelRedDot}"/>

but it's not working.it is showing blank like path is not correct

<!-- 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>

is there a way to achieve this using static resource

Solution

  • If you already upload a image in the static resources. setup>static resources then you can access Image like <img src="{!'/sfsites/c/resource/'+YOUR_STATIC_RESOURCE_NAME}"/>

    as you are trying to access image using Design property you can use below Lightning code:

    <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>

    and your Lightning Design Will look same

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

    Now you just have to call your Static Resource Name in showBannerImage property. for example if your static resource name is imageResource then you just have to call this name simply in community lightning page attribute.

    P.S. If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.