使用JavaScript更新图像源吗？

Question

我有一张图片（img.png），当下拉框改变时其内容也随之改变。

问题在于，当我在页面上改变下拉框时，图片的内容并没有改变。

我尝试使用以下 JavaScript：

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

而 img 标签则是：

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

并且组合框标签是：

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

我第一次更改选项时它有效了，但当我重新更改选项时，它仍然保留图片而没有更改。

我该如何解决这个问题？

- user3904830

---

你的函数没有选择DOM元素，它以前是怎么工作的？ - ProllyGeek

Answer 1

可能只是缓存问题

不要仅使用文件名，添加一个随机部分，例如“img.png？random”，这样你就会强制浏览器再次在服务器上查找图像，但“？random”部分将被丢弃，文件仍然可以找到。

最简单的方法是在扩展名后添加日期/时间。

- Mdk

---

简单来说，你不能再次请求image.png，浏览器会认为已经有了该图片的缓存，并继续显示相同的内容，所以，不要请求image.png，而是请求image.png?20140905155610（例如），只需使用var d = new Date(); var image='image.png?'+d.getMilliseconds(); pic.src(image);这样就可以解决你的问题。 - Mdk

Answer 2

您正在尝试将图像标签作为 smg1 传递，但您没有声明这是您的图像元素。

请尝试以下操作：

SwitchPic('img1');

然后在你的处理程序中：

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

在这种情况下，您要传递要更改的元素的ID，然后在您的处理程序中获取实际的元素。

- scunliffe

---

相同的是，实际图片已经改变，但网页上仍然显示旧的图像。 - user3904830

你想把图片改成什么样子？我刚刚注意到你原始的图片和你试图更改的那张图片都叫做“img.png”。你是希望展示一个与下拉选项匹配的图片吗？ - scunliffe

不，还有另一个程序会在每次执行onchanged操作时更改图片 img.png，函数show()调用它。 - user3904830

你能发布 show() 函数的代码吗？我认为这个函数中可能有一些行为不符合你的预期。 - scunliffe

@user78050，您所说的其他程序每次更改图片img.png是什么意思？您能发布show()方法的代码吗？ - Himanshu Tyagi

Answer 3

我认为你的问题是：

1. 一个名为img.png的图片。
2. 一个函数不断用其他相同名称的img.png替换实际的img.png。
3. 你重新分配了图像标记src属性，但图像没有刷新。

如果是这种情况，则是浏览器图像缓存的问题。请参考以下链接： 如何在jQuery中重新加载/刷新元素（图像） 如何强制Chrome在页面刷新之前不重新加载具有相同URL的图像，例如Firefox 如何强制Web浏览器不缓存图像 希望对你有所帮助！

- daksh_019

Answer 4

两个问题：

1. 你的函数仅将其更改为该图像，而不是切换它。
2. 你正在传递一个未定义的变量 img1。 你需要传递图片的ID，然后使用它来获取节点。

因此，您需要使用document.getElementById()来获取您的图像，然后每次都需要切换：

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

演示

- AstroCB

---

我有同样的图片 not original.png 和 img.png，在一起，只需要 img.png。 - user3904830

@user78050，我不知道你的目录长什么样子，因此我无法引用图像的名称:original.png只是一个例子。您是否想基于下拉列表中选择的内容来创建图像？ - AstroCB

我想表达的是我有一张图片。 - user3904830

@user78050，我看到你对scunliffe说的话：我同意show函数可能是问题所在，你也应该把它发布出来。 - AstroCB