jQuery Change Image Source Url

jQuery Change Image Source Url : Sometimes we need to change the image source url dynamically using jQuery or javascript. You can use jquery attribute method ie. .attr() to replace the image source url. Here in this tutorial we are going to explain how you can change the image source url using the jQuery.

jQuery Change Image Source Url

You can replace the image source url simply using the jQuery –

Syntax

$(selector).attr("src", newUrl);

You can use the above method to change image source url in jQuery. Add the image selector and provide the newUrl you want to change.

Example

Here is an example to change the image source url. You can replace the source url with new image source as below –

<amp-img src="//example.com/images/old-image.jpg" width="600" height="400" class="amp-wp-unknown-size amp-wp-enforced-sizes" sizes="(min-width: 600px) 600px, 100vw"></amp-img>
<button type="button">Change Image Url</button>

In the above example we have created a function which contains the script to change the image source. changeImageUrl() function is called on button click which will change the image source of image with id selector id=”myImage”.