Develop Reference

Is there a way to change an <img> source's extension explicitly using JS?

Beginner here. I have a series of HTML IMG elements that look like this:
<img src="1.png" onclick="changeImg(this)">
<img src="2.png" onclick="changeImg(this)">
<img src="3.png" onclick="changeImg(this)">
What I would like the "changeImg" JS function to do is, on click, change the image source from "1.png" to "1.gif". Essentially, just changing the last 3 letters of the img source.
The purpose of this is to allow users to click on an element in order to play an animated GIF. As such, "1.png" is simply a static PNG version of the animated "1.gif". Can this be done?

Use img.src:
function changeImg(img) {
img.src = img.src.replace('png', 'gif');
}
<img src="1.png" onclick="changeImg(this)">

// this is jquery code
// In this way, no matter what your src suffix is, it can be changed to gif
function changeImg(obj){
var nowSrc = $(obj).attr("src");
var srcName = nowSrc.split(".");
$(obj).attr("src",srcName[0]+".gif");
}
But why is it so troublesome? Is it not good to directly change src to 1.gif?
Because the sports picture does not have to have the same name as the static picture, what if the sports picture is 1.jpg and the sports picture is 2.gif?
This should be better. When generating the page, directly generate the img tag into the following form:
<img src = "Static image URL from server" onclick = "changeImg(this, "Dynamic image URL from server")">
<img src = "Static image URL from server" onclick = "changeImg(this, "Dynamic image URL from server")">
<img src = "Static image URL from server" onclick = "changeImg(this, "Dynamic image URL from server")">
// this is jquery code
function changeImg(obj, url){
$(obj).attr("src", url);
}
In this way, the names of the two pictures do not have to be the same, which is more flexible

How to use the attr function to get src of picture

When the user clicks a "Vacation" image on the left, a larger copy
of it will appear to the right of the images in the image with
an id of "currentimage" inside the "bigimage" div. (See the HTML file)
At the same time one of the following should appear below
the "currentimage": "Mountain Vacation", "Ocean Vacation", or "Desert Vacation"
depending on which image was selected.
this is part of the HTML code
<div id="bigimage">
<img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
<p id="imagedesc"></p>
</div>
This is part of the JS code
$("img").click(function ()
{
var mySrc = $(this).attr("src");
$("#currentimage").attr("src", mySrc);
$("#imagedesc").html(this.alt);
});
I also tried
$("img").click(function ()
{
$("#currentimage").attr("src", this.src);
$("#imagedesc").html(this.alt);
});
but when i click the image a larger copy of it is not appearing on the right

Browsers not reload image after change src. Try remove old element with old image and paste new element with new image src.
Or: How to reload/refresh an element(image) in jQuery

Your click handler is on any img this means that the #currentimage element is the only element which this handler is added. You are then setting the src to the src that it already is.
you instead want to change the src to something else. Here I set an initial smaller placeholder which is replaced with a larger one on click.
$("img").click(function() {
this.src = 'https://placeimg.com/500/500';
$("#imagedesc").html(this.alt);
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<img id="currentimage" src="https://placeimg.com/200/200" alt="ocean vacation" />
<p id="imagedesc"></p>

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,`

on jquery, how to manually define image src into html <img> tag

i'm trying to create a page filled with thumbnails, and on click, another div Full(to show the thumbnail image in full screen) will pop out, i will retrieve the src of the thumbnail img and pass into the Full div to display the clicked image.
This is what i have so far, fiddle: http://jsfiddle.net/mwhLoyy8/1/
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/BjVeUYS.png" alt="logo">
</div>
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" alt="logo">
</div>
for now i am detecting test_img click, and retrieving from js with
img = $('<img />', {src : this.src,
'class': 'full_image_pic'
});
this.src works fine, but i want to change to detecting on img_section instead of test_img, but i don't know how to retrieve the src, i tried this.test_img.src but it doesn't work.
Reason why i want to detect the div instead of the img directly is because in my real working file i have overlay another and while mouseover on the thumbnails, which the detection will not work on the words, since i only make it image-detectable only, so i want to change to detecting the parent div instead.
Another thing is, once i display the full image, how do i display unique Title & description under the full image displayed? Please guide me! Thanks
for Kamal
<div class="popUp">
<div class="fullPic">
<img class="full_image_pic" src="images/pic1.jpg" alt="logo2">
<div class="full_image_desc">
<h3 class="desc">Title</h3>
<p class="desc">My desc</p>
</div>
</div>

You can get the src with jQuery attr
img = $(".test_img").attr('src');
and change the src by
$(".full_image_pic").attr('src', img);
Please also take a look at this exmaple.
For changing title and description dynamically, you can add attributes in your original image;
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" img-title="some title" img-desc="some description" alt="logo">
</div>
Than use the attr to change the info.
title = $(".test_img").attr('img-title');
and using .html change the content of title/description
$(".full_image_pic .desc").html(title);

You can use class or ID to select an image and change image src
$(".image class or #ID").attr("src", "file name");
$(".photo").attr("src", "photo.jpg");
$("#logo").attr("src", "new-logo.jpg");

Use
$(".test_img").attr("src","abc.jpg");

Make html valid if adding new tag for <img>

I have html img list like this one:
<img src="over.png" width="150" heigh="72" />
<img src="2_over.png" width="150" heigh="72" />
<img src="3_over.png" width="150" heigh="72" />
but these images are quite large. I need to make it that it will load one by one "like ajax". But I cant load it from javascript in the begining, becouse it is our cms desing like that and we will have big troubles if i will change it. So what i am planning to do is:
<img src="" width="150" heigh="72" path="over.png" />
and load it one by one with javascript and replace src, but the html will not be valid. Can any one give me any solution how to implement it with valid html?

If putting the data somewhere is your sole problem, HTML5 supports data- attributes, which let you add arbitrary attributes to elements. It remains valid as long as the attribute name starts with data-. For instance:
<img src="" width="150" height="72" data-path="over.png" />
This feature, while not "valid" HTML4, should still work on all browsers as unknown attributes on tags are simply ignored (and kept as is).
Though, you may also search for a way to do it only with JavaScript. I don't really understand how dynamically adding images could break your CMS.
Also, the alt attribute is required for images (make it blank if you don't have anything useful to write instead), and I'm not sure a blank src attribute is valid (you may want to put a loading image's path instead).

set a valid url in the image before you call the javascript function, for instance like this:
<img src="blank.gif" alt="Blank Image" width="10" height="10" />
And as for the "path" attribute, you could put the link to the image in the alt attribute. That way your image tag will be valid.
<img src="blank.gif" alt="myImage.jpg" width="10" height="10" />
Then you can use javascript to fetch the image path from the alt attribute, and insert it in the src attribute when loaded.

Those images should be thumbnails, correct? So you're downscaling large images via HTML to small sizes. The best way would be, honestly, to provide already downscaled images as thumbnails.

One solution is to have a small image loading image and set that as the source for all the images until your javascript has loaded the relevant image.
<img src="loading.png" data-path="over.png" height="50" alt="Over" width="150">

You may want to check out JAIL, the jQuery Asynchronous Image Loader:
While it may be slightly more than what you need, its got lots of options available and its less code you have to write!