• PRUTHVI ADMIN
  • NEWBIE
  • 10 Points
  • Member since 2015

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 2
    Replies
I am trying to explore various concepts in lightning. My requirement is pretty simple. I have a zipped static resource with multiple images. I have used the <img> tag in the component and defaulted its src attribute to one of the images. Created a lightning button in the component definition whose action in the controller will change the 'src' attribute value to a different image. However, I am getting the below error in the console when the button is clicked and the image is not getting changed to a new one. Am I missing something here ?

Error: WARNING: AttributeSet.set(): unable to override the value for 'srcvalue=function (cmp, fn) { return fn.add($A.get("$Resource.SachinImages"),"/SachinImages/1image.jpg"); }'. FunctionCallValues declared in markup are constant.

Component definition:
<aura:component >
    <aura:attribute name="srcvalue" type="string" default="{!$Resource.SachinImages+'/SachinImages/1image.jpg'}"/>
    <img class="imgclass" src="{!v.srcvalue}" aura:id="imageid" /> <br/> <br/>
    <lightning:button onclick="{!c.buttonClickAction}" label="Click to start slide"/>
</aura:component>
Controller:
({
    buttonClickAction : function(component, event, helper) {
        var btnlabel = event.getSource().get('v.label');
        var srcval   = component.get('v.srcvalue');
        if(btnlabel == 'Click to start slide')
        {
            var changeNbr = srcval.substring(srcval.lastIndexOf('/') + 1, srcval.lastIndexOf('/') + 2); 
            var finalvalue = '{!$Resource.SachinImages' + '+' +'\'/SachinImages/' + (Number(changeNbr) + 1) +'image.jpg\'}';
            console.log('finalvalue'); -> This value is as expected.
            component.set('v.srcvalue',finalvalue);            
        }
    }    
})
 
I am trying to explore various concepts in lightning. My requirement is pretty simple. I have a zipped static resource with multiple images. I have used the <img> tag in the component and defaulted its src attribute to one of the images. Created a lightning button in the component definition whose action in the controller will change the 'src' attribute value to a different image. However, I am getting the below error in the console when the button is clicked and the image is not getting changed to a new one. Am I missing something here ?

Error: WARNING: AttributeSet.set(): unable to override the value for 'srcvalue=function (cmp, fn) { return fn.add($A.get("$Resource.SachinImages"),"/SachinImages/1image.jpg"); }'. FunctionCallValues declared in markup are constant.

Component definition:
<aura:component >
    <aura:attribute name="srcvalue" type="string" default="{!$Resource.SachinImages+'/SachinImages/1image.jpg'}"/>
    <img class="imgclass" src="{!v.srcvalue}" aura:id="imageid" /> <br/> <br/>
    <lightning:button onclick="{!c.buttonClickAction}" label="Click to start slide"/>
</aura:component>
Controller:
({
    buttonClickAction : function(component, event, helper) {
        var btnlabel = event.getSource().get('v.label');
        var srcval   = component.get('v.srcvalue');
        if(btnlabel == 'Click to start slide')
        {
            var changeNbr = srcval.substring(srcval.lastIndexOf('/') + 1, srcval.lastIndexOf('/') + 2); 
            var finalvalue = '{!$Resource.SachinImages' + '+' +'\'/SachinImages/' + (Number(changeNbr) + 1) +'image.jpg\'}';
            console.log('finalvalue'); -> This value is as expected.
            component.set('v.srcvalue',finalvalue);            
        }
    }    
})