Flask Cannot Display Uploaded Images

Question

I've been following multiple Flask tutorials (but mostly this one) on creating a web app that I can use to read an image into a FastAi model. At some point, I was even able to get the images to upload into a folder, but I could never get them to display on the webpage itself no matter what I tried to do (refactor the function, move the folder to 'static', explicitly declare paths, etc.). I assume I'm probably missing something incredibly basic but I don't know enough about Flask and how web apps work to know what that is.

Edit: I keep getting 400 Bad Request pages every time I attempt to upload an image through the "index.html" page and the image doesn't appear in the folder when I inspect it with Windows Explorer.

file structure:
main.py
app
--> __init__.py
--> routes.py

main.py:

from app import app

main.py:

from flask import Flask

app = Flask(__name__)

from app import routes

routes.py:

from app import app
import os
from fastai.vision.widgets import *
from flask import Flask, render_template, request

@app.route('/', methods=['GET','POST'])
def index():
    return render_template('index.html')

def get_predictions(img_path):
    global learner_inf
    learner_inf = load_learner('app/static/model/export.pkl')
    return learn_inf.predict(img_path)
    
@app.route('/predict', methods=['GET','POST'])
def predict():
    if request.method == 'POST':
        file = request.files['file']
        filename = file.filename
        file_path = os.path.join('app/static/uploads', filename)
        file.save(file_path)
        result = get_predictions(file_path)
    
    return render_template('predict.html', result = str(result), user_image = file_path)

index.html

<!doctype html>
<html>
    <head>
        <title>Grocery Classifier</title>
    </head>
    <body>
        <h1>Grocery Classifier</h1>
        <form method="POST" action="/predict" enctype="multipart/form-data">
            <p><input type="file" name="file /"></p>
            <p><input type="submit" value="Submit"></p>
        </form>
    </body>
</html>

predict.html

<!doctype html>
<html>
    <head>
        <title>Grocery Classifier</title>
    </head>
    <body>
        <h1>Grocery Classifier</h1>
        <img src="{{ user_image }}" alt="Selected Image" class="img-thumbnail">
        <h2>{{ result }}</h2>
    </body>
</html>

Answer 1

When referencing static items such as images and files, use the static folder to hold them.

app = Flask(__name__, static_folder="static")

After that, include it in CSS/HTML. This is not the direct application of inserting images in your situation, but it serves as a good example.

 background-image: url("bg.gif");

The url to reference the image can be literally anything, just be sure to remember it for later reference. The reference "bg.gif" seen in the CSS automatically does GET request to "yoururl.com/bg.gif" to obtain the image. Now link that url to the site path.

@app.route('/bg.gif', methods=['GET'])
def bghome():
    return send_from_directory("static", "bg.gif")

The route MUST be correct and exact and the file MUST exist. If you use a kwarg to get the image url, be sure to keep that url consistent to what you define in your flask backend pathing.

Flask Cannot Display Uploaded Images

Question

1 answers

solution1
0 2021-12-13 20:25:35

Flask Cannot Display Uploaded Images

Question

1 answers

solution1 0 2021-12-13 20:25:35

solution1
0 2021-12-13 20:25:35