How to Change the src Attribute of an Image Element in JavaScript / jQuery?

Last Updated : 15 Oct, 2024

To change the src attribute of an image element in JavaScript or jQuery, you can dynamically update the image by setting a new value for the src attribute.

Below are the methods to change the src attribute of an image element:

Table of Content

Using JavaScript DOM methods
Using jQuery prop() Method

Using JavaScript DOM methods

This HTML page changes the src attribute of an image when a button is clicked. It starts by displaying an image and a button. A JavaScript function GFG_Fun() changes the image’s src upon the button click and updates the text below the image to indicate that the src attribute has been modified.

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

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        Change the src attribute
        of an img tag
    </title>
</head>

<body style="text-align:center;">

    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
    </p>

    <img id="img"
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png" />

    <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 =
'https://media.geeksforgeeks.org/wp-content/uploads/20190529122826/bs11.png';
            down.innerHTML = "src attribute changed";
        }
    </script>
</body>

</html>

Output:

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

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

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        Change the src attribute of
        an img tag using jQuery
    </title>

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
</head>

<body style="text-align:center;">

    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
    </p>

    <img id="img"
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png" />

    <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',
'https://media.geeksforgeeks.org/wp-content/uploads/20190529122826/bs11.png');
            $("#GFG_DOWN").text("src attribute changed");
        }); 
    </script>
</body>

</html>

Output:

How to change style attribute of an element dynamically using JavaScript ?

PranchalKatiyar

Improve

Article Tags :

How to Change the src Attribute of an Image Element in JavaScript / jQuery?

Using JavaScript DOM methods

Using jQuery prop() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?