Search code examples
pythonhtmlcssflaskhttp-status-code-404

I get 404 error on the background image when I run my website

I created an instance of flask server and uploaded a machine learning model so I can send a post request that has a picture and get the result back in a JSON file, I tested it on a website contains two routes (I built the pages using HTML) and it was working correctly, I wanted to add a background image to the website but I am getting a 404 error on this image when I run the python file in my CMD.. Any help would be really appreciated.

This is the HTML code for one of the webpages

<!DOCTYPE html>
<html>
<head>
    <title>prediction</title>
</head>
<style>
    h3 {color:rgb(138, 34, 34); font-size: 25px;}
  </style>
<body style="background-image:url(a.jpg);background-size: 100%; color: white; position: absolute; top: 15%; left: 45%; font-size: 16px; line-height: 1.4;">

    <center>
        <h1>Your prediction is:</h1>

        

        <h3>{{data}}</h3>

    </center>

</body>
</html>

And this is the code for the flask server

from flask import Flask, render_template, request, jsonify
import cv2
import numpy as np
import pandas as pd
import tensorflow
from tensorflow import keras
from tensorflow.python.keras import backend as k

app = Flask(__name__)

model = tensorflow.keras.models.load_model('model.h5')


@app.route('/')
def index():
    return render_template("index.html", data="hey")


@app.route("/prediction", methods=["POST"])
def prediction():

    predd="Benign"
    
    img = request.files['img']
    
    img.save("img.jpg")

    image = cv2.imread("img.jpg")

    image = cv2.resize(image, (224,224))

    image = np.reshape(image, (1,224,224,3))

    pred = model.predict(image)

    preddd = pred > 0.5
    pre= pred*100
    s= "%"
    if(preddd):
        predd="Malignant"

    print("prediction is:")
    print(predd)
    print("percentage is:")
    print(str(pre) +s)
    print(" ")

    #return jsonify({"prediction is": predd,})
    return render_template("prediction.html", data=predd)
    


if __name__ == "__main__":
    app.run(debug=False,host='192.168.1.111',port=5000)

Here's a screenshot from my CMD

enter image description here

Solution

  • Make sure the image exists in the static subdirectory, so the path is:

    static/a.jpg

    Verify this can be loaded directly at http://192.168.1.111/static/a.jpg

    Then change the CSS to support this:

    background-image:url("/static/a.jpg")