How to get and set image src attribute example

Change the “src” attribute of an image using JavaScript.

This is a tutorial on how to change the “src” attribute of an image using JavaScript.

The src attribute specifies the URL of an image. Therefore, by setting a new src, we can dynamically change the image in question.

In this post, I will show you how to accomplish this using both regular JavaScript and jQuery.

Changing the src attribute using regular JavaScript.

If you’re not already using jQuery, then there is no sense in including the library just to manipulate the src attribute. Instead, you can just use vanilla JavaScript, which tends to be faster.

Take a look at the example below:

If you run the snippet above, you will see that the src attribute of our image element is replaced by our JavaScript code.

A more verbose example for those of you who want to understand what is going on here:

//Get our img element by using document.getElementById var img = document.getElementById("myImage"); //Set the src property of our element to the new image URL img.src = 'img/new-image.jpg';

In this case, we have broken the process up into two steps:

1. We retrieved the img element from our HTML DOM by using the method document.getElementById(). We passed “myImage” in as the parameter because that is the ID of our image.
2. After retrieving the img, we were able to modify its src attribute and assign a new URL.

This will force the browser to load our new image.

Changing the img src using jQuery.

If you’re already using the jQuery library and you would like to keep your code consistent, you can use the following method:

//Change the img property using jQuery's attr method $("#myImage").attr("src", 'img/new-image.jpg');

In the code above, we referenced the image by its ID and then used jQuery’s attr() method to set a new value for its src attribute.

Determining when the new image is loaded.

If you need to do something after the new image has loaded, then you can attach jQuery’s load() method to our example above:

//Change the img property and use load() to figure out when //the new image has been loaded $("#myImage").attr("src", 'img/new-image.jpg').load(function()< alert('New image loaded!'); >);

Once jQuery has changed the src property and the image from the new URL has been loaded in the browser, the code inside the load() method will execute. However, this load block will not execute if the image in question doesn’t exist.

Источник

jQuery Get and Set Image Src Example

To get the image src and set the image src using jQuery attr(). In this tutorial, you will learn how to get and set the image src using jQuery.

jQuery Get and Set Image Src Example

The attr() method to get and change the image source in jQuery.

Get Image Src

Use the below script to get image src.

Set the Image Src

Use the below script to set the image src.

Let’s take an example

The following example will change the second image to the first image.

      .card  
 
   

In the above example, we have got the first image src and set the src to the second image.

Conclusion

In this article, you have learned how to get the image tag src and set the image tag src using jQuery attr() with example.

Recommended jQuery Tutorials

Author Admin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Источник

jQuery get img src – Get the Source of an Image Using jQuery

To get the source of an image, we can use jQuery to get the img src using the attr() method.

The jQuery attr method will return the location of the file as a string.

Say we have the following html:

If we used the jQuery attr() method on the image, $(‘#img1’).attr(‘src’); , we would get the following returned:

An example using the attr() method to get and set the img src

Below is an example of how we can use jQuery to get the src of an image using the attr() method and how we can later set the src of that image.

Let’s say we have another image called “example-img2” which is in the same location as the image above. When we click the button, we want to swap out that image. We will use the jQuery attr() method to get the src of the image and store it as a variable. We will use the JavaScript indexOf() method to get the location of “example-img1” and use the substring() method to get the first part of the image location. Then we will add the new image file name and replace the old image. Here is the JavaScript code below:

The final code and output for this example is below:

Hopefully this article has been useful in helping you understand the jQuery attr() method for getting an img src.

Other Articles You’ll Also Like:

• 1. jQuery last() – Get the Last Element
• 2. Using jQuery to Show and Hide a Div
• 3. jQuery prependTo – Insert Element As First Child
• 4. Using jQuery to Select Multiple Ids
• 5. jQuery rotate – How to Rotate an Image using jQuery
• 6. Using jQuery to Delete an Element
• 7. jQuery val Method – Get the Value from an Input Field
• 8. Using jQuery to Get the Margin of an Element
• 9. jQuery mouseleave – An Interactive Example of the mouseleave Method
• 10. Using jQuery to Change Inner HTML

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Источник

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

There are different methods to change the path of an image given to the src attribute of an img element in HTML document using the JavaScript as well as jQuery.

Method of changing the src attribute of an img element using JavaScript −

Methods of changing the src attribute of an img element using jQuery −

Let us discuss each of the above listed methods of changing the src of an img element one by one in details −

Using src property in JavaScript

JavaScript allow us to use the src property to get the already assigned value to it as well as to update or change the value of the same attribute. It is very common method of changing the value of src attribute of an img element.

Syntax

Following syntax will explain you how to use the src property to change the value of the src attribute of an img element in JavaScript −

Selected_image_element.src = " new value ";

Let us understand the practical implementation of this method with the help of code example −

Algorithm

• Step 1 − In the first step, we will add a img element with a src attribute associated with it, whose value we will change later using the src property in JavaScript.
• Step 2 − In this step, we will add a button element with the onclick event associated with it, which call a function when user click the button to change the src of the image.
• Step 3 − In the next step, we will define a JavaScript function, in which we will grab the img element using its ID and then change the src attribute using src property and toggle between two images.
• Step 4 − In the last step, we will assign the function to the onclick event defined in the last step to see the changes on user screen.

Example

Below example will explain you how to use the src property to change the src attribute of an img practically in JavaScript −

  
Change the src attribute of an img element
 
The image shown below will be changed once you click the button.
  
 
Click to change the Image    

In this example, we have used the src property in JavaScript to change the src attribute of an img element in the HTML document. Here, we are toggle between two images every time we click the button.

Using attr() method in jQuery

We can also change the src attribute using the attr() method in JavaScript.

attr() method − The attr() method takes two parameters, where the first parameter will be the name of attribute whose value we want to change in form of string and another will be the new value that we wan t to assign to the attribute.

Syntax

Following syntax will explain you the implementation of the attr() method with the parameters −

attr(" attribute_name ", " new_value ");

Let us understand the implementation of this method in details with the help of code example.

Algorithm

• Step 1 − In the first step, we will add the jQuery link in the head element of the document inside the src of the script element
• Step 2 − In this step, we will add a img element with a src attribute which will be changed later using the attr() method in jQuery.
• Step 3 − In the third step, we will add a button element which will be given an onclick event and a function later using jQuery.
• Step 4 − In the next step, we will grab each element using the “$” syntax of jQuery and perform tasks on each one of them.
• Step 5 − In the last step, we will assign an onclick even to the button using the on() method in jQuery, so that it can call the function given inside it when the button is clicked and the changes are visible to the user.

Example

Below example will illustrate the use of the attr() method in jQuery to change the src attribute of an img element −

    
Change the src attribute of an img element using jQuery
 
The image shown below will be changed once you click the button.
  
 
Click to change the Image    

Using the prop() method in jQuery

Similar to the attr() method jQuery also provide us a prop() method to change the value of any attribute to a new value.

prop() method − The prop() method can be used as we used the attr() method in previous example. It takes property name and the new value to be assigned as parameters.

We can set the value to the single as well as multiple properties using the prop() method.

Syntax

Following syntax will show you how you can use the prop() method for different purposes −

Changing value of a particular attribute −

prop(" attribute_name ", " new_value ");

Changing values of multiple attributes −

In the second syntax, we are giving the multiple attributes with their new values associated with them at same time.

Let us understand the use of prop() method in details with the help of the code example.

Algorithm

The algorithm of this example is almost similar to the algorithm of the previous example. You just need to replace the attr() method in the previous algorithm with the prop() method to get the work done.

Example

Below example will explain you how the prop() method change the value of the src attribute of the img element in HTML document −

    
Changing the src attribute of an img element using jQuery
 
The image shown below will be changed once you click the button.
  
 
Click to change the Image    

In the above example, we have used the prop() method in jQuery to change the src attribute of the img element in the HTML document.

In this article, we have discussed about the three different methods of changing the value of the src attribute of an img element using the JavaScript as well as jQuery. We have understand all the methods in details by practically implementing them inside the code examples, which helps to build the practical knowledge of the concepts.

Источник