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>

我第一次更改选项时工作，但是当我重新更改选项时，它会保留图像而不更改它。

我该如何解决这个问题？

Answer 1

可能只是一个缓存问题不要只使用文件名，而是添加随机部分，例如＆＃39; img.png？random＆＃39;，这样你就可以强制浏览器在服务器上再次查找图像，但是？无论如何都会丢弃随机部分，仍然会找到该文件最简单的方法是在扩展名后添加日期/时间

Answer 2

您试图将图片代码作为smg1传递，但您没有声明这是您的图片元素。

试试这个：

SwitchPic('img1');

然后在你的处理程序中：

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

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

Answer 3

两个问题：

您的功能仅将其更改为该图片，而不是将其切换。
您传递的变量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;
    }
}

Demo

Answer 4

我认为你的问题是：

名称为img.png。
一个函数不断改变实际的img.png与其他图像但名称相同img.png
您重新分配了图像标记src属性，但图像没有刷新。

如果是这种情况那么这是浏览器图像缓存的问题。请参阅以下链接：

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

使用JavaScript更新图像src？

4 个答案: