Captcha image is not displayed on localhost

I have designed a simple contact form for a WordPress theme and used a simple captcha image inside the form.

My main problem is that the captcha image is not generated.

I have installed the GD library for xampp software (on localhost) but still the captcha image is not displayed and when I right-click and select the inspect option in the tag, I get the following line: <img height="80" width="200" src="captcha/captcha.php"/>

I have tried similar codes and other captcha libraries but still the captcha image is not displayed to me.

I searched a lot and didn't find a solution to display captcha image on localhost.

Can the captcha image be displayed in localhost and I am not looking for something impossible?

Note: My contact form is fine and only the captcha image is not displayed.

The code I put in index.php:

<!-- Start your project here-->
<div class="container">
    <br/>
    <div class="row">
        <div class="col-4">
            <!-- Default form contact -->
            <form autocomplete="off" class="text-center border border-light p-5" method="post" action="submitform.php">
                <p class="h4 mb-4">Contact us</p>
                <!-- Name -->
                <input type="text" class="form-control mb-4" name="family" placeholder="name">
                <!-- Phone -->
                <input type="text" class="form-control mb-4" name="phone" placeholder="phone">
                <!-- Email -->
                <input type="email" class="form-control mb-4" name="email" placeholder="email">
                <!-- Message -->
                <div class="form-group">
                    <textarea class="form-control rounded-0" rows="3" name="message" placeholder="Write your message"></textarea>
                </div>
                <!-- Capthca -->
                <img height="80" width="200" src="captcha/captcha.php"/>
                <input type="text" class="form-control mb-4" name="captcha" placeholder="Enter the security code">
                <!-- Send button -->
                <button class="btn btn-info btn-block" name="btn" type="submit">submit</button>
            </form>
            <!-- Default form contact -->
        </div>
    </div>
</div>

The code I put in submitform.php:

<?php
session_start();
if ($_SESSION['captcha'] === $_POST['captcha']) {
    echo 'The security code is correct.';
} else {
    echo 'Security code is wrong.';
}

The code I put in captcha.php:

<?php
session_start();
//You can customize your captcha settings here

$captcha_code = '';
$captcha_image_height = 50;
$captcha_image_width = 130;
$total_characters_on_image = 6;

//The characters that can be used in the CAPTCHA code.
//avoid all confusing characters and numbers (For example: l, 1 and i)
$possible_captcha_letters = 'bcdfghjkmnpqrstvwxyz23456789';
$captcha_font = './monofont.ttf';

$random_captcha_dots = 50;
$random_captcha_lines = 25;
$captcha_text_color = "0x142864";
$captcha_noise_color = "0x142864";


$count = 0;
while ($count < $total_characters_on_image) { 
$captcha_code .= substr(
    $possible_captcha_letters,
    mt_rand(0, strlen($possible_captcha_letters)-1),
    1);
$count++;
}

$captcha_font_size = $captcha_image_height * 0.65;
$captcha_image = @imagecreate(
    $captcha_image_width,
    $captcha_image_height
    );

/* setting the background, text and noise colours here */
$background_color = imagecolorallocate(
    $captcha_image,
    255,
    255,
    255
    );

$array_text_color = hextorgb($captcha_text_color);
$captcha_text_color = imagecolorallocate(
    $captcha_image,
    $array_text_color['red'],
    $array_text_color['green'],
    $array_text_color['blue']
    );

$array_noise_color = hextorgb($captcha_noise_color);
$image_noise_color = imagecolorallocate(
    $captcha_image,
    $array_noise_color['red'],
    $array_noise_color['green'],
    $array_noise_color['blue']
    );

/* Generate random dots in background of the captcha image */
for( $count=0; $count<$random_captcha_dots; $count++ ) {
imagefilledellipse(
    $captcha_image,
    mt_rand(0,$captcha_image_width),
    mt_rand(0,$captcha_image_height),
    2,
    3,
    $image_noise_color
    );
}

/* Generate random lines in background of the captcha image */
for( $count=0; $count<$random_captcha_lines; $count++ ) {
imageline(
    $captcha_image,
    mt_rand(0,$captcha_image_width),
    mt_rand(0,$captcha_image_height),
    mt_rand(0,$captcha_image_width),
    mt_rand(0,$captcha_image_height),
    $image_noise_color
    );
}

/* Create a text box and add 6 captcha letters code in it */
$text_box = imagettfbbox(
    $captcha_font_size,
    0,
    $captcha_font,
    $captcha_code
    ); 
$x = ($captcha_image_width - $text_box[4])/2;
$y = ($captcha_image_height - $text_box[5])/2;
imagettftext(
    $captcha_image,
    $captcha_font_size,
    0,
    $x,
    $y,
    $captcha_text_color,
    $captcha_font,
    $captcha_code
    );

/* Show captcha image in the html page */
// defining the image type to be shown in browser widow
header('Content-Type: image/jpeg'); 
imagejpeg($captcha_image); //showing the image
imagedestroy($captcha_image); //destroying the image instance
$_SESSION['captcha'] = $captcha_code;

function hextorgb ($hexstring){
  $integar = hexdec($hexstring);
  return array("red" => 0xFF & ($integar >> 0x10),
               "green" => 0xFF & ($integar >> 0x8),
               "blue" => 0xFF & $integar);
               }
?>

Edit:

Image of xampp software installed on my Windows 10 64-bit version:

xampp softwar

Solution

I realized my mistake. To display the captcha image in WordPress, I need to specify the path of the captcha file through WordPress codes. By replacing the following code instead of the <img> tag, the captcha image will be displayed correctly:

<img height="80" width="200" src="<?php bloginfo('template_url'); ?>/captcha/captcha.php"/>

Also, in the <form> tag and in the action section, I should have added a / to avoid being redirected to the 404 page.