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

How can i replace image ? (JS)

How can i replace image? Tag don't have id.
<img src="URL_1" />
I want replace URL_1 to URL_2
Some solution?

If you know the URL you can use
document.querySelector('img[src="URL_1"]').src = "URL_2";
If you don't know the URL and can use an id this would be it:
<img id="id" src="URL_1" />
document.getElementById("id").src = "URL_2";

Assuming that's the only image in the page you can use the Element.getElementsByTagName() to reference the element, and edit its src property:
document.getElementsByTagName('img')[0].src = 'URL_2'
The Selectors API is more appropriate as you can target the element with more details, using a CSS selector:
document.querySelectorAll('img')[0].src = 'URL_2'

If you can't add an id or a class maybe you can wrap your img tag with a div and use more specificity div .myclass img, last solution I see is if you know URL_1 you can select this img tag by the selector: img[src="URL_1"]

Give it an ID
<img id="img1" src="URL_1" />
Then
document.getElementById('img1').setAttribute('src', 'URL_2');

First of all, give an ID to your image
Html code
<img id="my_image" src="URL_1"/>
Jquery code
$("#my_image").attr("src","URL_2");
Or without using Jquery
document.getElementById("my_image").src="URL_2";

What does this warning message mean? 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images'

Why am I getting this warning?
warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/img-has-alt
It's showing line number 13 but there is nothing props is using.

It means when you create an image in your HTML, you should include an alt attribute for the benefit of screen readers and text browsers.
<img src="url" alt="description of image">

Images should have an alt property. The alternate property comes into picture in several cases like the card not getting downloaded, incompatible browsers, or the image getting corrupt. You need to pass in a prop called alt to the image.
Also, Alt tag is used by screen readers for visually impaired. Therefore it is considered as a good practice to always add a ALT tag to the image component.
Accessibility

It means that your <img> tag MUST have an alt attribute on it like so:
<img src="pathToYourImage.extension" alt="My Awesome Image">
In case if the image isn't loaded then the text inside the alt attribute will be shown instead.

I had the same error. Basically, you should not include these words in alt attribute. image or picture, or photo
// avoid using image or picture, or photo
// do
<img src="foo" alt="nice"/>. // good
// don't
<img src="foo" alt="foo is coming "/>. // bad

It means that your image need a description and this is a property in the img tag called alt so use this as long as you write in JSX & React :
<img src={ImageImported} alt="description of image"/>

I had a similar error with this code.
<img src={props.contacts.imgUrl}/>
Solution: Notice the alt= position on the image anchor outside the curved parenthesis
<img src={props.contacts.imgUrl} alt=""/>

This error means that you haven’t added the "alt" property. This property is mandatory, so you can not ignore it.
To get rid of this error you should set the alt attribute and pass some text there. It's like a description of your photo. This text will be used in cases when your picture is not loaded or when browser couldn't find your image by provided path (src attribute).
<img src="path_to_your_image" alt="alternative_text_of_your_image"/>

in the alt attribute do not put the image or Image because those words are reserved for react

Try this one :
<input type="image" img src = {'url'} alt="photo" />
(I have used `` not the single quotation marks for the url)

I had this an error when using ESLint in React for this:
<img src={frontDefault} />
Add this
alt=''
This is how it must be for it to work
<img src={frontDefault} alt='' />

In my case, this error was inside the REACT, and it happened because it was like this, <img src={{RedLed} } style={{width:'50px'}}/>, that way I was giving this error. The error was that I put two braces around the img call and I only needed one brace like that, <img src={RedLed} style={{width:'50px'}}/>

The element includes the alt property, which will prevent the image from having any alternate text,`

Get attribute of clicked link with JS function

there is html structure:
<a onclick="setString()">
<img alt="no" />
</a>
I need to get attribute of a,that had been clicked,e.g. alt.
How to know with setString() js function ,
image with what alt attribute is clicked?
I assume,that somehow with this,but don't know how.

onclick="setString(this)
///Javascript Code:
function setString(element){
var value = element.children[0].alt;
}

I would change my HTML to remove the bits that aren't needed...
<img alt="no" onclick="setString(this.alt);" />
Rather than wrapping the image in an anchor tag, style it with CSS if you want...
cursor: pointer;

How to append HTML to images using JQuery?

I am using Galleria and I need to wrap my images that Galleria puts into a slide with a link.
I was going to use this methodology: Give the <img> a bogus title= value and then append a <a> tag around the <img>, drawing the link I need from the title= tag.
This is the code I've got so far.
$("img#gallery").this.title.appendTo("img#gallery") { });
I'm trying to get the script to loop through all of the images and append the html.
I also don't know if I should be using .appendTo or .before and .after

That approach will work. You're looking for the wrap function:
var title = $('#test').attr('title');
$('#test').wrap('<a href="'+title+'" />');
This $.each will let you iterate through a series:
<img src="" class="test" alt="test" title="http://www.google.com" />
<img src="" class="test" alt="test" title="http://www.yahoo.com" />
$.each($(".test"), function() {
var title = $(this).attr('title');
$(this).wrap('<a href="'+title+'" />');
});

You could just listen for a click on the entire thing and then figure out if an image was clicked and if so which image and then change the location object.

Use $.each to iterate through all the images you want to wrap and then use
$('img#gallery').wrap('<a href='whatever'>)
to wrap it. It will automatically close the A tag.