How do I replace only part of an image source?

Question

Is there a way to use jQuery to change a part of an image's source URL?

I'm working on a page that has a number of image elements that are all programmatically generated (but I'm not able to access the source code that generates them). And they all share the same class.

Let's say I have the following HTML:

<img src="https://cdn.example.com/pictures/01.jpg" class="photo">
<img src="https://cdn.example.com/pictures/02.jpg" class="photo">
<img src="https://cdn.example.com/pictures/03.jpg" class="photo">
<img src="https://cdn.example.com/pictures/04.jpg" class="photo">

Simple enough. But now, what if I want to point them all to a different directory? Like: /images/

So far, I've tried a few things, including this bit of jQuery, but nothing's done the trick so far:

$("img.photo").attr("src").replace("pictures","images");

That feels like it should do it because it's targeting images with that class -> then the "src" attribute -> and telling it to replace "pictures" with "images."

But I'm extremely new to using jQuery, so I'd appreciate some help.

What am I missing here? Any advice?

UPDATE: Huge thanks to those who provided answers and explanations — I really appreciate you helping a beginner!

Answer 1

Your code snippet won't work, because that's grabbing the src attribute of the first image, and changing it, but never setting the result as the new src on the <img> elements.

Try this

  $("img.photo").each((index, img) => {
    img.src = img.src.replace("pictures","images");
  });