function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PRUTHVI ADMINPRUTHVI ADMIN 

Dynamically change an attribute value from lightning controller

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);            
        }
    }    
})
 
Best Answer chosen by PRUTHVI ADMIN
sfdcMonkey.comsfdcMonkey.com
hi Prutivi,
use below code this will work for you: 
<aura:component >
	   <aura:attribute name="srcvalue" type="string" default="/SachinImages/1image.jpg"/>

    <img class="imgclass" src="{!$Resource.SachinImages + v.srcvalue}" aura:id="imageid" /> <br/> <br/>
    
    <lightning:button onclick="{!c.buttonClickAction}" label="Click to start slide"/>
</aura:component>
  
({
    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); 
             console.log('changeNbr' + changeNbr); 
            var finalvalue = '/SachinImages/' + (Number(changeNbr) + 1) +'image.jpg';
            component.set('v.srcvalue',finalvalue);            
        }
    }    
})
i hope it helps you.
      Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
  thanks
http://sfdcmonkey.com

All Answers

Marco_ValenteMarco_Valente
Hi,
you can set an attribute by controller, but for access the static resource, use:
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 =   $A.get('$Resource.SachinImages') +'/image.jpg';
            console.log('finalvalue: ' + finalvalue);
            component.set('v.srcvalue',finalvalue);            

    }    

And it's work!!
PRUTHVI ADMINPRUTHVI ADMIN
Hi Marco,
Thanks for the response. I tried the below code and it threw me the same error.

            var changeNbr = srcval.substring(srcval.lastIndexOf('/') + 1, srcval.lastIndexOf('/') + 2); 
            var finalvalue = $A.get('$Resource.SachinImages') + '/SachinImages/' + (Number(changeNbr) + 1) + 'image.jpg';
            console.log(finalvalue);            
            component.set('v.srcvalue',finalvalue);

I think its something to do with the way we are trying to change the attribute value of a HTML tag from controller. There must be a different way of doing it. 
sfdcMonkey.comsfdcMonkey.com
hi Prutivi,
use below code this will work for you: 
<aura:component >
	   <aura:attribute name="srcvalue" type="string" default="/SachinImages/1image.jpg"/>

    <img class="imgclass" src="{!$Resource.SachinImages + v.srcvalue}" aura:id="imageid" /> <br/> <br/>
    
    <lightning:button onclick="{!c.buttonClickAction}" label="Click to start slide"/>
</aura:component>
  
({
    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); 
             console.log('changeNbr' + changeNbr); 
            var finalvalue = '/SachinImages/' + (Number(changeNbr) + 1) +'image.jpg';
            component.set('v.srcvalue',finalvalue);            
        }
    }    
})
i hope it helps you.
      Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
  thanks
http://sfdcmonkey.com
This was selected as the best answer
PRUTHVI ADMINPRUTHVI ADMIN
Thats Perfect Piyush. Thanks for the answer. Marking your answer as the best one.