Способ обновления файла PNG без обновления всей страницы

Простые вещи :

<img src = "yoursource" id = "captchaimage" onclick = "actualiser()"/>

Потом :

function actualiser() {
document.getElementById("captchaimage").src = "yoursource"}

Поэтому, когда вы нажимаете на изображение, оно перезагружает только изображение (добавьте тот же источник, чтобы всегда перезагружать одно и то же изображение)

РЕДАКТИРОВАТЬ

Если вы не хотите щелкать мышью, вы также можете установить таймер, который будет перезагружаться каждые x секунд (нужна другая строка кода)

Как указал LPK, вы должны изменить источник изображения через JavaScript, чтобы браузер обновил его.

Я не уверен, почему у вас возникли проблемы с этим, как вы указали в комментариях к ответу LPK, но, возможно, вы забыли включить свойство onclick в HTML.

Вот пример с фрагментом, который показывает, как это сделать по таймеру, по щелчку изображения и по щелчку привязанного элемента. Также, как указано в ответе LPK, просто установите для атрибута src то же самое, чтобы перезагрузить одно и то же изображение.

const captchaImage = document.getElementById('captchaimage');

// Change the captcha image after 1 second.
setTimeout(() => {

  captchaImage.src = 'http://placehold.it/125x125';
  
}, 1000);

// Change it on click.
captchaImage.onclick = () => {

  captchaImage.src = 'http://placehold.it/200x200';
  
};

// Change it when another button clicked.
const testBtn = document.getElementById('testBtn');

testBtn.onclick = () => {

  captchaImage.src = 'http://placehold.it/150x150';
  
};

a {
  cursor: pointer;
  background: #e5e5e5;
  padding: 0.5rem;
}

<img src = "http://placehold.it/100x100" id = "captchaimage"/>

<a id='testBtn'>Click to change captcha image</a>

Чтобы узнать о другом источнике по этой теме, перейдите по этой ссылке на страницу W3 школы, и вы можете проверить ссылку «Попробуйте сами», чтобы увидеть еще один пример этого в действии.

Обычно я не буду писать столько кода, так как stackoverflow не является службой кодирования, но после просмотра снимков экрана вашего кода в комментариях я убежден, что вы сделали честную попытку, но в неправильном направлении, поэтому следующий фрагмент кода является примером руководства строка о том, как код captche должен использовать PHP и AJAX.

Этот первый файл является файлом изображения, он называется captche_image.php и должен быть отдельным, поскольку к нему будут выполняться вызовы ajax:

<?php

session_start();

function captche_generator()
{
    function ct_rand($lenght=6)
    {
        $characters = '0123456789'; $tumble = "";
        for ($i=0; $i < $lenght ; $i++) {$tumble .= $characters[mt_rand(0, strlen($characters)-1)];} return $tumble;
    }

    //font file, font size, image text and save text to session
    $fontfile   ='../fonts/JustMeAgainDownHere.ttf';
    $fontsize   =50;
    $text       =ct_rand();
    $_SESSION['captche'] = $text;

    //image size, backgroundcolor, transparent background, textcolor
    $captche_image = imagecreate(180, 50);
    $background_color = imagecolorallocate($captche_image, 255, 255, 255);
    imagecolortransparent($captche_image, $background_color);
    $text_color = imagecolorallocate($captche_image, 0, 0, 0);

    //a loop to create scrambled line in image
    for ($xy=0; $xy <=50 ; $xy++)
    { 
        $x1= rand(1,1000);
        $y1= rand(1,1000);
        $x2= rand(1,100);
        $y2= rand(1,100);
        imageline($captche_image, $x1, $y1, $x2, $y2, $text_color);
    }

    //create image in .png extension
    imagettftext($captche_image, $fontsize, 0, 15, 30, $text_color, $fontfile, $text);
    imagepng($captche_image);

    //set header and return created image
    header("Content-type: image/png");
    return $captche_image;
}

captche_generator();

?>

Этот другой файл должен быть вашей страницей ввода текста, это комбинированная страница PHP и HTML, и я добавил минимальный CSS, чтобы сделать его видимым.

    <?php
ob_start();
session_start();

if (isset($_GET["captche_input"]) && filter_var($_GET["captche_input"], FILTER_VALIDATE_INT))
{
    if ($_SESSION['captche'] === $_GET["captche_input"])
    {
        session_destroy();
        ob_flush();
        header("location:./login.php"); //redirect to the login page or any other page you wish
    }
    else
    {
        session_destroy();
        ob_flush();
        echo "<center><p style='padding: 5px;background-color:red;'> Code is Incorrect. Please try Again.</p></center>";
        echo "<script type='text/javascript'> alert('Code is Incorrect. Please try Again.'); </script>";
    }
}
?>

<!DOCTYPE html>
<html>
<style>
    body{
    background-image: url("../images/captche_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: right;
    background-attachment: fixed;
    }
    .captcheBoard{
    position: relative;
    display: flex;
    align-items: center;
    flex-basis: 100%;
    flex-direction: column;
    margin-top: 15%;
    text-align: center;
    }
    .captcheBack{
    position: relative;
    height: 90px;
    width: 272px;
    background-image: url('../images/captche_mini.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-background-size: center;
    -moz-background-size: center;
    -o-background-size: center;
    background-position: center;
    border: 0.10em solid coral;
    border-radius: 0.03em;
    }
    .captcheFront{
    position: relative;
    margin-top: 8%;
    }
    .captcheInputBar{
    position: relative;
    margin: 3% 0%;
    border: 0.10em solid coral;
    border-radius: 0.03em;
    font-size: 24px;
    text-align: center;
    }  
</style>
<body>
    <div class = "container captcheBoard">

        <div class = "captcheBack">
            <div class = "captcheFront"><!--captche image is shown here--></div>
        </div>

        <form action = "" method = "GET">
            <input type = "number" class = "captcheInputBar" required name = "captche_input" pattern = "[0-9]{0,}" placeholder = "Enter Captche Here" />
            <br>
            <input type = "submit" class = "Button" name = "captche_check" value = "Submit" />
        </form>

        <input type = "button" class = "Button" name = "captche_refresh" value = "Refresh" onclick = "reload_captche()"/>
    </div>

    <script type = "text/javascript">
        function reload_captche()
        {
            var xhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

            xhttp.open("POST", "./captche_image.php", true);
            xhttp.send();

            xhttp.onreadystatechange = function()
            {
                if (this.readyState == 4 && this.status == 200)
                {
                    document.getElementsByClassName("captcheFront")[0].innerHTML = '<img src = "./captche_image.php" />';
                }
            }
        }

        window.load = reload_captche();
    </script>
</body>
</html>

Примечание. Страница, на которую пользователь был перенаправлен при успешном вводе капче, должна иметь способ проверки правильности ввода кода, иначе пользователь может просто перенаправить себя на указанную страницу.