Flask: Can't display an uploaded image - html

Question

I am working on a small blogging page using Flask. I set up an admin page where I can create articles(using wtforms) that I want to be displayed on the (front end) homepage. All my form fields in the Create Article Form(in my Admin page) are saving their respective inputs(Title, Image, PreviewText, Content, Category). When I click on post article it is succesfully put into the sqlite db and everything except the uploaded image is displayed on the homepage. In my CreateArticleForm I am using the enctype="multipart/form-data"
Here is my routes.py. As you can see I set up an save image function above the route(to save the upladed image into my static/images/article_imgs folder and included it into the route. After uploading the image and checking the folder I can see the image was added to that folder.
def save_article_image(form_picture):
random_hex = secrets.token_hex(8)
_, f_ext = os.path.splitext(form_picture.filename)
picture_fn = random_hex + f_ext
picture_path = os.path.join(app.root_path, 'static/images/article_imgs', picture_fn)
form_picture.save(picture_path)
return picture_fn
######################admin-Routes
# create article
#app.route('/createarticle', methods=['GET', 'POST'])
#login_required
def create_article():
form = CreateArticleForm()
if form.validate_on_submit():
if form.picture.data:
picture_file = save_article_image(form.picture.data)
article_image=picture_file
article = Article(title=form.title.data, article_image=picture_file,
article_preview=form.preview.data, article_content=form.content.data,
category=form.category.data, author=current_user)
db.session.add(article)
db.session.commit()
flash('Article was posted.', 'success')
return render_template('admin/createarticle.html', form=form)
Here is my home route, where the article I create is displayed:
#app.route('/')
def home():
article = Article.query.all()
return render_template('home.html', article=article)
Finally my home.html, where the data is put into html. Here you can see the img-Tag where I am trying to get the uploaded image to be displayed.
{% for article in article %}
<div class="col-xs1-12 col-sm-6 col-md-4">
<div class="card mt-3">
<img class="card-img-top" src="{{ url_for('static', filename='article.article_image') }}"
alt=" Card image cap">
<div class="card-body">
<h6 class="card-category">{{ article.category }}</h6>
<h5 class=" card-title">{{ article.title }}</h5>
<p class="card-text">{{ article.article_preview }}</p>
<p class="text-right">{{ article.date_posted.strftime('%d.%m.%Y') }}</p>
Read More
</div>
</div>
</div>
{% endfor %}
All I get is an error message in the console: Failed to load resource: the server responded with a status of 404 (NOT FOUND). Again I can see the article with the title, preview text etc. but the article_image.

Answer 1

It says line 59, which is the img Tag where I want to display the image. Filename = to the picture_file I saved the image.
{% for article in article %}
<div class="col-xs1-12 col-sm-6 col-md-4">
<div class="card mt-3">
<img class="card-img-top" src="{{ url_for('static', filename=picture_file) }}" alt=" Card image cap">
<div class="card-body">
<h6 class="card-category">{{ article.category }}</h6>
<h5 class=" card-title">{{ article.title }}</h5>
<p class="card-text">{{ article.article_preview }}</p>
<p class="text-right">{{ article.date_posted.strftime('%d.%m.%Y') }}</p>
Read More
</div>
</div>
</div>
{% endfor %}

Answer 2

I just changed the src of the img tag to filename=form.picture.data since I want the data that I put into the form. Thus, I get an jinja error saying:
jinja2.exceptions.UndefinedError: 'form' is undefined and it points me to my home route saying:
return render_template('home.html', article=article)
and my home.html saying
<img class="card-img-top" src="{{ url_for('static', filename=form.picture.data) }}" alt=" Card image cap">
{% for article in article %}
<div class="col-xs1-12 col-sm-6 col-md-4">
<div class="card mt-3">
<img class="card-img-top" src="{{ url_for('static', filename=form.picture.data) }}" alt=" Card image cap">
<div class="card-body">
<h6 class="card-category">{{ article.category }}</h6>
<h5 class=" card-title">{{ article.title }}</h5>
<p class="card-text">{{ article.article_preview }}</p>
<p class="text-right">{{ article.date_posted.strftime('%d.%m.%Y') }}</p>
Read More
</div>
</div>
</div>
{% endfor %}
The way I understand it, is that my home route does not know the picture data so I try to put define the argument inside my home route with filename=picture_file and then the error says
NameError
NameError: name 'picture_file' is not defined
#app.route('/')
def home():
article = Article.query.all()
return render_template('home.html', article=article, filename=picture_file)