How to change the src attribute of an img element in JavaScript / jQuery ?

The task is to change the src attribute of the <img> element by using JQuery and JavaScript.

  • jQuery prop() Method: This method set/return properties and values of the matched elements. If this method is used to return the property value, it returns the value of the first selected element. If this method is used to set property values, it sets one or more property/value pairs for the set of selected elements.

    Syntax:



    • Return the value of a property:
      $(selector).prop(property)
    • Set the property and value:
      $(selector).prop(property, value)
    • Set property and value using a function:
      $(selector).prop(property, function(index, currentvalue))
    • Set multiple properties and values:
      $(selector).prop({property:value, property:value, ...})

    Parameters:

    • property: This parameter specifies the name of the property.
    • value: This parameter specifies the value of the property.
    • function(index, currentvalue): This parameter specifies a function that returns the property value to set.
      • index: This parameter receives the index position of element in the set.
      • currentValue: This parameter receives the current property value of selected elements.
  • jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.

    Syntax:

    $(selector).on(event, childSelector, data, function, map)

    Parameters:

    • event: This parameter is required. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.
    • childSelector: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
    • data: This parameter is optional. It specifies additional data to pass to the function.
    • function: This parameter is required. It specifies the function to run when the event occurs.
    • map: It specifies an event map ({event:func(), event:func(), …}) having one or more event to add to the selected elements, and functions to run when the events happens.

Example 1: This example changes the src attribute of image by using JavaScript.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Change the src attribute
            of an img tag
        </title>     
    </head
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <img id = "img" src =
          
        <br>
          
        <button onclick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script
            var up = document.getElementById('GFG_UP');
            up.innerHTML = "Click on button to change the src of image";
            var down = document.getElementById('GFG_DOWN'); 
              
            function GFG_Fun() {
                document.getElementById("img").src =
                down.innerHTML = "src attribute changed";
            }
        </script
    </body
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example changes the src attribute of image by using JQuery.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Change the src attribute of
            an img tag using jQuery
        </title>
          
        <script src =
        </script>
    </head
  
    <body style = "text-align:center;">
           
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <img id = "img" src =
          
        <br>
          
        <button onclick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script
            $("#GFG_UP").text("Click on button to change the src of image");
            $('button').on('click', function(e) {
                $('#img').prop('src',
                $("#GFG_DOWN").text("src attribute changed");
            }); 
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.