Develop Reference

How do I replace only part of an image source?

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!

In your code you simply change the returned string from
$("img.photo").attr("src") without doing anything with it afterwards. This will not change the attribute in your <img> elements.
This should do the job:
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")})
Here I go through all the matched elements and assign the changed src string back to each element's srcattribute.
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")});
// list the changed src values in the console:
console.log($("img.photo").map((i,img)=>img.src).get())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">

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");
});

Replacing image src with javascript

I have this HTML class where I want to replace the img src with different image. Have been able to find something close but nothing quite working.
HTML:
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
Javascript:
$('div.playoff-img:contains("src/img/imga.png")').replaceWith('src/new/image/imgb.png');

You need an attribute selector and use .attr to set the src attribute.
$('div.playoff-img img[src="src/img/imga.png"]').attr('src', 'src/new/image/imgb.png');

The Js way of solving this problem
document.getElementsByTagName("img")[0].setAttribute("src","http://www.gstatic.com/webp/gallery/4.jpg");
The jQuery way of solving this problem
$(".playoff-img img").attr("src", "http://www.gstatic.com/webp/gallery/4.jpg");

simple and easy !
$(".playoff-img img").attr("src", "put new source address here");

Use [attr*="value"] to select an attribute that contains a particular string. Next you will want to use attr() to set the attribute to something new.
$('div.playoff-img img[src*="src/img/imga.png"]')
.attr('src', 'src/new/image/imgb.png');

<!-- use jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
<script>
$(function(){
$(".playoff-img").attr("src", "put new source address here");
});
</script>

retrieve contents of div and make image src

Is there a way to fetch the content of a div and place that ocntent in the 'src' parameter of an image? I'm working on a project that uses json to load translation files, and tehrefore I can't load an image directly, but figured I could at least load the image name.
So:
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img src="DIV CONTENTS HERE">
Ideas appreciated! (Am also using jquery so open to that as well)

The button demonstrates that ablility. Use the button's onclick code wherever you need.
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="myImage" />
<button onclick="document.getElementById('myImage').src=document.getElementById('flag-name').innerText">Change</button>

You can simply do it in jQuery by getting the text of the div and then setting the source of image like this:
var source = $("#flag-name").text();
console.log("before - " + $("#image").attr("src"));
$("#image").attr("src",source);
console.log("after - " + $("#image").attr("src"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="image" src="DIV CONTENTS HERE">

You need an event to start the jQuery/javascript -- so I added a button. Also, you will find it easier to target specific DIV and IMG tags if you give them IDs or classes.
$('button').click(function(){
var mySrc = $('#flag-name').text();
$('img').attr('src', mySrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">http://placeimg.com/300/200/animals</div>
<img src="DIV CONTENTS HERE">
<button>Go</button>

How to get an image HTML which parent has more children?

I want to get the whole HTML tag of an image (<img src="url" ... />). I can do it with .html() function if I refer to its parent:
<div id="image">
<img src="url" />
</div>
and with JQuery:
$('#image').html()
But how could I do it if I don't have an image "only" parent:
<div id="image">
<img src="url" />
<!-- Here some stuff. E.g. -->
<div><p>Something</p></div>
</div>
If I do $('#image').html() here, I'll get the whole content. If I do $('#image img').html() I'll get an empty string.
How could I get the whole <img> tag here?

You can use .outerHTML
$('#image img').prop('outerHTML')
$('#image img')[0].outerHTML //in this case you need to test whether $('#image img')[0] exists
Demo: Fiddle

In Javascript, it's as simple as:
document.getElementById('image').getElementsByTagName('img')[0].outerHTML
and as cookie monster says,
A nice alternative if IE6/7 support isn't needed would be document.querySelector("#image > img").outerHMTL
DEMO

How to populate href value from src value of an image?

I know this is super simple, but I can't work it out (I'm a designer).
I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.
the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.
I tried something like this, but it didn't work.
<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>

You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:
<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>

try this as your <a>'s href:
href="javascript:window.location=this.getElementsByTagName('img')[0].src;"
Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.

try this.
var att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);