Hay varias formas de refrescar una imagen con javascript. La más sencilla es sobreescribir el atributo src
con el mismo valor anterior:
function reloadCaptcha() {
var img = document.querySelector(".secure > img");
img.src = img.src;
}
<div class="secure">
<div class="update"><a href="javascript:reloadCaptcha();">Actualizar código</a></div>
<img src="secureimage.php"/>
</div>
Quizá en algún navegador no se produzca el refresco si el nuevo valor es el mismo, por lo que otra solución podría ser agregar un número aleatorio en la cadena de consulta (lo que va tras el ?
) que, inicialmente, debería tener un efecto neutro en la llamada al script PHP que genera el captcha:
function reloadCaptcha() {
let img = document.querySelector(".secure > img");
let miUrl = new URL(img.src);
miUrl.search = Math.floor(Math.random() * 10000000);
img.src = miUrl.href;
}
<div class="secure">
<div class="update"><a href="javascript:reloadCaptcha();">Actualizar código</a></div>
<img src="secureimage.php"/>
</div>
Para no tener que guardar la URL original he usado la clase URL
y cambiado la propiedad search
que se corresponde con la parte que va tras el ?
.