Question

我有一个从另一个php页面生成的图像

         <img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">

每次创建验证图像。在每次刷新时，生成不同的图像。但我想要的是在那里放一个按钮来改变图像而不刷新整个页面。

        <input type="button" value="refresh"  onclick="refresh();">

我的js代码是

         function refresh(){

         document.getElementById("imagid").src="sample.php";
          }

它不起作用，如何通过js

更改图像src

Answer 1

在您的JS代码中，您尝试更改按钮的“src”属性，您需要将id应用于图像，而不是按钮。

您需要做的是：

<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
<input type="button" value="refresh" id="imagid" onclick="refresh();">

<script>
function refresh() {
    document.getElementById("imagid").src = "sample2.php";
}
</script>

Answer 2

试试这个

<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
<input type="button" value="refresh" id="buttonid" onclick="refresh();">

<script>
$('#buttonid').click(function()
{
    $('#imageid').attr('src','sample2.php');
}
</script>

Answer 3

问题可能是因为它的MIME类型已经被浏览器缓存了。

有各种方法可以解决它，

1）一共使用不同的页面名称，sample1.php，sample2.php ..... 但是你无法创建无限数量的页面。

2）在URL中使用salting，即sample.php？rand = 1，sample.php？rand？= 2 .... 此rand参数将一直保持更新，并且每次向服务器发出请求都会生成新图像。

还有其他一些先进的方法，但这是开始使用的方法。

Answer 4

您的错误就在这里。您没有为您的图片代码指定ID，而您在js代码中也是按钮ID。

<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
function refresh(){
         document.getElementById("imagid").src="sample.php";
}

注意：确保按钮和图像标签的ID。没有两个元素应该具有相同的ID。

希望这会有所帮助......

通过js从php页面更改图像的src

4 个答案: