Update image src using JavaScript?

Question

I have one image (img.png), with its content changing after a combo box changes.

The problem is the content of the image doesn't change when I change the combo box on the page.

I tried to use JavaScript like this:

function SwitchPic(pic) {
    pic.src = "img.png";
}

and the img tag is:

<img src='img.png' id='img1' name='img1'>

and the combo box tag is:

<select name="users" onchange="show(this.value);SwitchPic(img1);">
    <option value="">Select a Number:</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

It worked the first time I change the option, but when I re-change the option, it keeps the image without changing it.

How can I solve this?

your function doesnt select a dom element how did it even work once ? — ProllyGeek, Aug 31 '14 at 00:42

Mdk · Accepted Answer · 2020-01-15T09:09:01.180

11

Might be just a cache problem

Instead of just using the filename, add a random part to it, like 'img.png?random', that way you'll force the browser to look for the image again on the server, but the ?random part will be discarded anyway and the file will still be found

Easiest way to do this is to add the date/time after the extension

edited Jan 15 '20 at 09:09

answered Sep 04 '14 at 13:20

Mdk

485
3
9

Easily put, you can't request image.png again, the browser will think it already has the image cached and keep on displaying the same so, instead of asking for image.png you'll ask for image.png?20140905155610 (for example), just use `var d = new Date(); var image='image.png?'+d.getMilliseconds(); pic.src(image);` and it should fix your problem – Mdk Sep 05 '14 at 13:55

score 4 · Answer 2 · answered Aug 31 '14 at 00:42

4

You are attempting to pass your image tag as smg1 but you don't declare that that is your image element.

try this:

SwitchPic('img1');

and then in your handler:

function SwitchPic(picID) {
  var pic = document.getElementById(picID);
  pic.src = "img.png";
}

In this scenario you pass the ID of the element you want to change then acquire the actual element inside your handler.

answered Aug 31 '14 at 00:42

scunliffe

57,883
24
118
156

the same, the actual picture is changed,but it still the old image on the web page – Aug 31 '14 at 00:50
what do you want to change the picture to? I just noticed that both your original image and the one you attempt to change to are both named "img.png". Are you hoping to show a picture to match the selected option in the drop down? – scunliffe Aug 31 '14 at 00:55
No, there is other program which change the picture `img.png` every time `onchanged` action happened ,, the function `show()` call it – Aug 31 '14 at 00:57
1

Can you post the code for the `show()` function? I think there might be something in this function that isn't behaving the way you expect. – scunliffe Aug 31 '14 at 01:01
@user78050 what do you mean by other program change the picture `img.png` every time ..? And can you post `show()` method code? – Himanshu Tyagi Sep 02 '14 at 13:37

AstroCB · Answer 3 · 2014-08-31T00:55:08.040

0

Two problems:

Your function only changes it to that image, rather than toggling it.
You're passing a variable img1, which is not defined. You need to pass the image's ID and then use that to get the node.

So, you need to use document.getElementById() to get your image and then you need to toggle each time:

var clicked = false;

function SwitchPic(pic) {
    var image = document.getElementById(pic);
    if(!clicked){
        image.src = "otherImg.png";
        clicked = true;
    }else{
        image.src = "img.png";
        clicked = false;
    }
}

Demo

edited Aug 31 '14 at 00:55

answered Aug 31 '14 at 00:43

AstroCB

11,800
20
54
68

I have the same picture not original.png and img.png together, only img.png – Aug 31 '14 at 00:53
@user78050 I don't know what your directory looks like so I can't reference the names of the images: `original.png` was just an example. Do you want to base the image off of what is selected in the dropdown? – AstroCB Aug 31 '14 at 00:55
what I'm trying to say is that I have one image – Aug 31 '14 at 01:00
@user78050 I see what you said above to scunliffe: I agree that the `show` function is probably the issue here and you should post that as well. – AstroCB Aug 31 '14 at 01:02

score 0 · Answer 4 · edited May 23 '17 at 12:08

I think your problem is that there is :

An image by the name of img.png.
A function keeps changing the actual img.png with other image but with the same name img.png
You re-assign the image tag src attribute but the image doesnt refresh.

If that is the case then it is an issue of image caching of browser. refer to the links below :

How to reload/refresh an element(image) in jQuery

how to force chrome not to reload images with same url till the page is refreshed ,like firefox

How to force a web browser NOT to cache images

hope it helps!

Update image src using JavaScript?

4 Answers4