I have the following code which generates the correct filepath for the images I have, it also populates them correctly inside the generated HTML in browser, but my browser refuses to load saying, that it is 'Not allowed to load local resource'.
This is the code I have: Python3:
@app.route("/", methods=["GET", "POST"])
def main():
conn = sqlite3.connect('mydb.db')
c = conn.cursor()
#Defines what to do when the request is GET
if request.method == 'GET':
allPosts = c.execute('SELECT * FROM posts ORDER BY time DESC')
return render_template('index.html', allPosts = allPosts)
#Defines what to do when the request is POST
if request.method == 'POST':
pass
@app.route("/upload", methods=["GET", "POST"])
def upload():
conn = sqlite3.connect('mydb.db')
c = conn.cursor()
#Define what to do if method is GET
if request.method == 'GET':
return render_template('upload.html')
#Define what to do if method is POST
if request.method == 'POST':
#Get the data from the form
#image = request.files['image']
username = request.form['username']
title = request.form['nadpis']
post = request.form['prispevok']
#Get a random ID of post
randomIdOfPost = random.randrange(99999999)
#Get current timestamp
actualTime = datetime.now()
actualTimeForInsertingIntoDB = str(actualTime.day) + '.' + str(actualTime.month) + '.' + str(actualTime.year) + ' ' + str(actualTime.hour) + ':' + str(actualTime.minute) + ':' + str(actualTime.second)
if 'image' not in request.files:
flash('No image part')
return redirect('/upload', code=302)
image = request.files['image']
# if user does not select file, browser also
# submit an empty part without filename
if image.filename == '':
flash('No selected image')
return redirect('/upload', code=302)
if image and allowed_file(image.filename):
filename = secure_filename(image.filename)
filename = str(randomIdOfPost) + '_' + filename
image.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
imageName = str(filename)
#Save the post into DB
data = [(randomIdOfPost, actualTimeForInsertingIntoDB, username, title, post, imageName)]
c.executemany('INSERT INTO posts VALUES (?,?,?,?,?,?)', data)
conn.commit()
return redirect('/', code=302)
HTML:
{% for row in allPosts %}
<div class="container-fluid" align="center">
<span class="badge badge-info">#{{ row[0] }} / Pridané dňa {{ row[1] }}<br>používateľom {{ row[2] }}</span>
<h6>{{ row[3] }}</h6>
<p>{{ row[4] }}</p>
<img src="{{ url_for('static', filename='{{ row[5] }}') }}" alt="my text">
</div>
<p> </p>
{% endfor %}
On top of my Python3 code I also have:
UPLOAD_FOLDER = os.getcwd() + r'\static'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
app = Flask(__name__, template_folder=os.getcwd(), static_folder=os.getcwd() + r'\static')
#Set the route to the static folder (folder containing css stylesheet)
app._static_folder = os. getcwd() + "\\css"
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
The only issue I have is, that my browser does not allow me to show the images that someone uploaded.
All the help is much appreciated.
EDIT 1:
{% for row in allPosts %}
<div class="container-fluid" align="center">
<span class="badge badge-info">#{{ row[0] }} / Pridané dňa {{ row[1] }}<br>používateľom {{ row[2] }}</span>
<h6>{{ row[3] }}</h6>
<p>{{ row[4] }}</p>
<!-- I tried both <img> tags below, none of them works.. -->
<img src="{{ row[5] }}" alt="my text">
<!-- <img src="{{ url_for('static', filename='{{ row[5] }}') }}" alt="my text"> -->
</div>
<p> </p>
{% endfor %}
` with file paths in your code. Use
os.path.join` et al. exclusively. And you probably don't want to be doingapp._static_folder = os. getcwd() + "\\css"