'Failed to load resource: the server responded with a status of 404 (NOT FOUND) np4A8.png:1

I have two files to make a CAPTCHA page, here's the HTML file

<!DOCTYPE HTML>
<html>
    <head>
        <title> Example </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <link rel="shortcut icon" href="#">
    </head>
    <body onload="example()">
        <h1> Captcha Example </h1>
        <div id="x"></div>
        <label> Enter the text from Captcha above </label>
        <input type="text" id="CaptchaInput">
        <br> <br>
        <input type="button" value="Enter" id="Button">
        <script>
            var Captcha ='{{ newData.CaptchaValue }}';
            Button.addEventListener("click", function() {
                if(Input === Captcha) {
                    console.log("Match");
                } else {
                    console.log("Incorrect");
                }
            })

            function example () {
                $.ajax({
                    url: "/",
                    context: document.body
                })
                var img1 = new Image();
                img1.src = "../np4A8.png";
            }
        </script>
    </body>
</html>

And my Python file

import random
from flask import Flask, render_template
from captcha.image import ImageCaptcha

app = Flask(__name__)
result_str = ''.join(
    (random.choice('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789') for i in range(5)))

@app.route('/')
def generateCaptcha():
    # Create an image instance of the given size
    image = ImageCaptcha(width=280, height=90)

    # Image captcha text will equal random result
    captcha_text = result_str

    # generate the image of the given text
    data = image.generate(captcha_text)

    # write the image on the given file and save it
    image.write(captcha_text, result_str + '.png')
    newData = {'CaptchaValue': result_str}
    return render_template('main.html', newData=newData)

if __name__ == "__main__":
    app.run(debug=True)

I always get the error: Failed to load resource: the server responded with a status of 404 (NOT FOUND) np4A8.png:1 I need to change it to the captcha file name but first I wanted to work with an image that already exists. Basically I have the main directory and a templates folder with my HTML page. The main directory folder has the PNG images. I thought "../np4A8.png" was the previous directory and looking for a photo called np4A8.png. Please help me. I'm so close to finishing and been struggling with this

javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Failed to load resource: the server responded with a status of 404 (NOT FOUND) np4A8.png:1

Sources

Related Questions