使用 JavaScript 更新图像 src？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25587973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update image src using JavaScript?
提问by Mdk
I have one image (img.png), with its content changing after a combo box changes.
我有一个图像 ( img.png)，其内容在组合框更改后发生变化。
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:
我尝试像这样使用 JavaScript：
function SwitchPic(pic) {
pic.src = "img.png";
}
and the imgtag is:
而img标签是：
<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?
我该如何解决这个问题？
回答by Mdk
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
不只是使用文件名，而是添加一个随机部分，例如“img.png?random”，这样您将强制浏览器再次在服务器上查找图像，但无论如何都会丢弃 ?random 部分并且仍然会找到该文件
Easiest way to do this is to add the date/time after the extension
最简单的方法是在扩展名后添加日期/时间
回答by scunliffe
You are attempting to pass your image tag as smg1but you don't declare that that is your image element.
您正在尝试将您的图像标记作为传递，smg1但您没有声明那是您的图像元素。
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.
在这种情况下，您传递要更改的元素的 ID，然后获取处理程序中的实际元素。
回答by AstroCB
Two problems:
两个问题：
- Your function onlychanges 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.
- 您的函数只会将其更改为该图像，而不是切换它。
- 您正在传递一个
img1未定义的变量。您需要传递图像的 ID，然后使用它来获取节点。
So, you need to use document.getElementById()to get your image and then you need to toggle each time:
因此，您需要使用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;
}
}
回答by daksh_019
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.
- 一个名为 img.png 的图像。
- 一个函数不断将实际的 img.png 更改为其他图像但具有相同的名称 img.png
- 您重新分配图像标签 src 属性，但图像不会刷新。
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
如何强制 chrome 在页面刷新之前不重新加载具有相同 url 的图像，例如 firefox
How to force a web browser NOT to cache images
hope it helps!
希望能帮助到你！
