2

I want to change one letter in the src of the image tag using js or jQuery.

<img src="/media/image_i/ball.png">
<img src="/media/image_i/bat.png">

I want to change that letter i in the src to a number. Eg.it should look like this -

<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">

EDIT- When i used the solutions everything was working, but it was changing the "src" of all image tags to same as first image, so the second image which is "bat.png" is getting changed to "ball.png", so same image is displaying two times. Thank you!

Improve this question
2
  • 2
    Seems pretty trivial, what have you tried that didn't work? Image src Property Commented Apr 7, 2018 at 13:05
  • Please try to solve this yourself. If you run into problems, post a question with specific problem description, and we'll be glad to help Commented Apr 7, 2018 at 13:08

3 Answers 3

Reset to default
2

You can simply get the src attribute of the images, loop it over and replace the _i with _4 using JQuery. To check the below snippet works, you need to use inspect element of the browser and check the src attribute.

$(document).ready(function(){
  $('img').each(function(){
    var src = $(this).attr('src');;
    $(this).attr('src', src.replace('_i','_4'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Hi, please seee the question now, i am getting a new issue. Thanks
@john since you have multiple images you need to loop over to the images and change the src attribute of each image. Check the updated answer and please tick mark it if it was helpful.
thankyou so much Ankit Agrawal this snippet was all i needed!!
1

You can do this job using regex.

$(document).ready(function(){
  var src = $('img').attr('src');
  var newsrc = src.replace(/_./g, '_4');
  $('img').attr('src', newsrc);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_i/ball.png">

You can develop it further. For more : https://stackoverflow.com/a/2912904/5792209

Improve this answer

Comments

0

First, you'll need to identify the particular img element you need to modify. This can be done in a variety of ways, like giving the img in question an id or a class that is unique. If the image is the only one using the src you've specified in your question, you can use that (and that's what I'm doing in the code that follows).

After getting the proper reference to the element, use the .attr() method to get/set the current src value and the standard String.replace method to swap the values:

var current = $("img[src='/media/image_i/ball.png']");
current.attr("src", current.attr("src").replace("_i", "_4"));

If this is all you need to do, JQuery is overkill. Standard JavaScript is just as simple:

var el= document.querySelector("img[src='/media/image_i/ball.png']");
el.src = el.src.replace("_i", "_4");
Improve this answer

12 Comments

Who down voted?
Someone is grumpy this morning. This is the right answer and also provides the JS alternative.
@DTavaszi Use your edit privilege wisely. Never edit a question or answer for the reasons you did here. My wording, grammar and formatting were intentional and I have reverted the edit. Edits are for correcting mistakes or to clarify. Your edit does not do that.
@ScottMarcus Thanks for the feedback, Marcus. My edit comment explains my changes. Keep in mind that, as the author of the post, what you write is not obvious to others who stumble on this answer. Reducing redundant words helps readers understand the answer. For example, the wording of "you'll need to" is redundant, and so is "the particular", because coders will not be here to modify an image they do not need to - or a non-"particular" one. Therefore, my edit privilege was used wisely to clarify small parts of your otherwise well-written answer.
@ScottMarcus The wording in your original post does not reflect the information you wrote to me now. Again, it makes sense to you, because you wrote it. But to convey this information you need to be explicit. My edit did not change the meaning of your post. If you do not understand that, that's fine. Stack Overflow is a community platform, hence why my edit was approved.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.