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

Show placeholder if image not found [duplicate]

This question already has answers here:
Angular2: Show placeholder image if img src is not valid
(9 answers)
Closed 2 years ago.
I was trying to use onerror. Whenever image is not found in the folder it displays a placeholder. My image path is dynamic and comes from backend. Below is how I used it.
<img class="" src="{{imagePath}}my_image.jpg" onerror="this.src='{{imagePath}}placeholder.jpg';" alt="Image not found">
But this is not working and giving error.

For this I used to use picture tag, browsers will try first source, then second, if browser don't have picture interpreter will use img tag.
Like this:
<picture>
<source alt="Special Days" srcset="[First Image route].jpg" type="image/jpeg">
<source alt="Special Days" srcset="[Second Image route].jpg" type="image/jpeg">
<img alt="Imagen" src="[First Image route].jpg">
</picture>

Strange Anchor Tag Behavior - Awful [duplicate]

This question already has answers here:
Are you allowed to nest a link inside of a link?
(9 answers)
Closed 5 years ago.
I know this is silly but just listen, I have this HTML code in my page but when I open this in my Chrome browser it show strange behavior (view image). Yes I tried it again by opening in IE browser but same results, the anchor tag not working as it should. Also I tried it by disabling and removing all my Javascript files and codes, but still.
Any help would be appreciated :)
Image:
HTML code:
<div class="post">
<a href="#0">
<div class="post-image">
<img src="img/jan-erik-waider-1639.jpg" alt="" />
</div>
<div class="post-data align-center">
<a class="post-category" href="#0">Personality</a>
<div class="post-title">
<h2>We swallow it fast, we choke. We get in our lungs</h2>
</div>
<div class="post-excerpt">
<p>Awesome get some in our lungs, we. That's clear. We swallow it too fast, That's also clear. But for some
reason, we choke....</p>
</div>
</div>
</a>
</div>

Nested anchor elements are forbidden in HTML syntax. On the practical side, browsers effectively enforce this restriction in their parsing rules.
You can find a detailed reference here

Yes nested anchor elements are forbidden in HTML syntax.
You can't put a tag inside of an tag for doctypes prior to HTML5. But you could do something like this.
<a href="#0">
<span id="bestprice">
</span>
</a>

Load external photo with javascript

I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?

I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});

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