Image formula field in lightning do not display images,

Question

I have a lightning component to display a image formula field in the lightning app and Community. when added this field to the lightning app image is not rendering instead it just displaying the html tag.. I have referred to this post and tried implementing this in my formula but still no luck..

my formula field is as below.

    IF(ISPICKVAL( Reward_level__c , 'Gold') ,  
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/Gold",'Gold Status',20,577) ,
IF( ISPICKVAL(Reward_level__c, 'Bronze') ,  
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/Bronze",'Bronze Status',20,577) , 
IF(ISPICKVAL(Reward_level__c , 'Silver')  ,
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/Silver",'Silver Status',20,577) ,  
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/None",'Not Started',20,577) 
) 
))

Component

<aura:component controller="olympic" implements="forceCommunity:availableForAllPageTypes" access="global">

<aura:attribute name="OlympicReward" type="Olympic_Rewards__c[]"/>
<aura:handler name="init" value="{!this}" action="{!c.getMyObjects}" />
<!--  <ui:button label="Check Reward status" press="{!c.getMyObjects}" /> -->
<aura:iteration var="OLRS" items="{!v.OlympicReward}">
    <p>{!OLRS.Name},
    {!OLRS.StatusBar__c}</p>
</aura:iteration>

component controller

({
getMyObjects: function(cmp){
    var action = cmp.get("c.getOlympic");
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            cmp.set("v.OlympicReward", response.getReturnValue());//The attribute that you are iterating has to be set here
        }
    });
    $A.enqueueAction(action);
}

})

Answer 1

It appears that the way to render text without HTML-escaping is using aura:unescapedHtml. I have not used Lightning, but I'd assume you need to change your page to (assuming OLRS.StatusBar__c is the formula field):

<aura:iteration var="OLRS" items="{!v.OlympicReward}">
    <p>{!OLRS.Name},
    <aura:unescapedHtml value="{!OLRS.StatusBar__c}" /></p>
</aura:iteration>