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

Angular Image src not updating although variable is populated

I have the following code:
app.component.html:
<button (click)="updateImage('image1.png')"></button>
<img src="{{selectedImage}}" alt="" />
app.component.ts:
selectedImage;
updateImage(image) {
this.selectedImage = image;
}
My question is...If image url has been passed, why isn't the image src updating?

use [src] instead of src
<img [src]="selectedImage" alt="" />

Also, ensure that your pathing is correct. The code looks good, but the app may not find your image. There would be an error 404 in your browser console if that were the case.
Try placing the image in your assets folder and linking it with updateImage('/assets/image1.png')

Angular showing HTML tags in browser instead of image

First, sorry if it is very simple question, is my second month learning JS.
I upload an image to my site picture here to show like an avatar image for user, but it only shows HTML tags not the image itself, actually HTML directs to correct link of image in my coputer folder but don't show any image, only the HTML tags..
This are the instructions to show the image:
<div class="image_for_edit" *ngIf="user.image && user.image != 'null'">
<img src="{{url + "get-image-user/" + user.image}}" styles="width: 50px;">
</div>
Then instead of the image, browser shows this:
<img src="http://localhost:3977/api/get-image-user/Gja384icVy1nFy1tp6ZvVzEK.jpg"
styles="width: 50px;">
Why is happening this? Don't give any error on mongodb or console, file uploads fine to the correct folder and seems everything fine, only have this problem. And I cannot find any error i've been searching on internet all day why can be this with Angular but still not find a solution.
Hope someone can help me a little to solve this..

You should use ng-src for image tags instead of src. Note also that you should use single quotes ' inside the double-quoted attribute value.
<div class="image_for_edit" *ngIf="user.image && user.image != 'null'">
<img ng-src="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;">
</div>

In Angular2:
<img [src]="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;" />
In Angular1:
<img ng-src="{{url + 'get-image-user/' + user.image}}" styles="width: 50px;" />

You can try like that.
in src tag, give your folder path.
<img src="api/get-image-user/{{ user.image }}" alt="" styles="width: 50px;"/>

Change the src of HTML image tag to load image from a url using Javascript

Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"
I have an image tag defined as below
<img id="image" src="" alt="" />
Moreover my javascript function executes the following on a button click
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";
The URL seems to work fine, but the image doesn't show up onclick.
Am I making any mistake?
Thanks for any suggestion :)

I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:
<a href="#"
onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>

I created a Jsfiddle, and it seems to work fine.
https://jsfiddle.net/ltlombardi/jvts4m3y/
var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};
<img id="image" src="" alt="" />
Click here

Is there a way I could pick up the first image in a blogpost and put it as a header in a blog post?

So what I'm trying to do is to get the first image in a blogpost to look like a header for every blog post page....
This is what I have so far:
<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>
But then it's not really working. Can someone please help me out? Please see this for an example. I want the first image in my post to look like that header on the page....

I have had trouble with that too. I suppose you want to use the image as a background image.
I worked around that using some jquery.
Your aim is a little bit different than mine, so I would suggest you actually add a class to your first image (may want to do that manually, or use javascript), get the source, add it as a background image to your header and hide the image tag (don't do that if repetition is intended)
Markup would then be something like:
<header class="imgbg"></header>
<div class="post">
<h1>Title</h1>
<p>Text</p>
<img src="#" class="first-img">
</div>
and jquery:
function getimgsrc(){
$('.post').find('.first-img').each(function(n, image){
var image = $(image);
var thisurl = $(this).attr('src');
$('.imgbg').css('background-image', 'url(' + thisurl + ')');
$('.first-img').remove();
});
}
I built a codepen to illustrate this a bit better: http://codepen.io/bekreatief/pen/BaFnx