Edit:
I resolved this however cannot add an answer as the question is locked.
When passing image paths to a html file that is called using flask, flask assumes a folder exists called static in the dir from where the app is called. In my case this was test_uploads/app. So to call my image, I had to place a folder called static in this location, with my image file in it:
test_uploads
├── app
│ ├─ templates
│ │ └─ image.html
│ ├─ static
│ │ └─ image.jpg
│ ├─ __init__.py
│ └─ routes.py
├── config.py
└── main.py
My call from the html file then took the following structure:
<!-- image.html -->
<!DOCTYPE html>
<html>
<head>
<title>View Stock</title>
</head>
<body>
<img src="static/{{ image }}">
</body>
Et voila, the image renders.
This file location can be manipulated using the app.config.static_folder, and app.config.static_url_path attributes to suit your own location however.
This seems to be a common issue, and I've looked at a few questions on here, but I just can't get it to work.
I have stripped my whole app back to this most basic functionality, and still can't make the web page show my image.
All I get is the error icon and a 404 error in console. The path that is given in the error is the correct path to my image though, so I am even more confused.
Whe
I have the following file structure, and am trying to show image.jpg on a web page:
test_uploads
├── app
│ ├─ templates
│ │ └─ image.html
│ ├─ __init__.py
│ └─ routes.py
├── cover_images
│ └─ image.jpg
├── config.py
└── main.py
<!-- image.html -->
<!DOCTYPE html>
<html>
<head>
<title>View Stock</title>
</head>
<body>
<img src="{{ image }}">
</body>
# __init__.py
from config import Config
from flask import Flask
app = Flask(__name__)
app.config.from_object(Config)
from app import routes, models
# config.py
import os
basedir = os.path.abspath(os.path.dirname(__file__))
class Config():
UPLOAD_FOLDER = os.path.join(basedir, 'cover_images')
# main.py
from app import app
# routes.py
from app import app
from flask import render_template
import os
@app.route('/check')
def image_check():
image_path = os.path.join(app.config['UPLOAD_FOLDER'], 'image.jpg')
print(image_path)
return render_template('image.html', image = image_path)
And the terminal output:
127.0.0.1 - - [19/Nov/2021 10:51:57] "GET /check HTTP/1.1" 200 -
127.0.0.1 - - [19/Nov/2021 10:51:57] "GET /Users/<me>/Downloads/test_uploads/cover_images/image.jpg HTTP/1.1" 404 -
