Flask：无法显示上传的图像

Question

我正在使用 Flask 开发一个小型博客页面。我设置了一个管理页面，我可以在其中创建我想在（前端）主页上显示的文章（使用 wtforms）。我在创建文章表单（在我的管理页面中）中的所有表单字段都保存了它们各自的输入（标题、图像、预览文本、内容、类别）。当我点击发布文章时，它已成功放入 sqlite 数据库，并且 除了上传的图片之外的所有内容都显示在主页上。在我的 CreateArticleForm 中，我使用的是 enctype="multipart/form-data"

这是我的 routes.py。如您所见，我在路由上方设置了保存图像功能（将上传的图像保存到我的 static/images/article_imgs 文件夹中并将其包含到路由中。上传图像并检查文件夹后我可以看到图像已添加到该文件夹​​中。

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)

这是我的家路线，显示我创建的文章：

@app.route('/')
def home():
    article = Article.query.all()
    return render_template('home.html', article=article)

最后是我的home.html，其中数据被放入html。在这里你可以看到我试图显示上传图片的 img-Tag。

{% 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>
            <a href="#" class="btn read-more">Read More</a>
        </div>
    </div>
</div>
{% endfor %}

我得到的只是控制台中的一条错误消息：加载资源失败：服务器响应状态为 404（未找到）。 我可以再次看到带有标题、预览文本等的文章，但看到的是 article_image。

Answer 1

它说第 59 行，这是我要显示图像的 img 标签。 Filename = 到我保存图片的picture_file。

{% 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>
            <a href="#" class="btn read-more">Read More</a>
        </div>
    </div>
</div>
{% endfor %}

Answer 2

我刚刚将 img 标签的 src 更改为 filename=form.picture.data 因为我想要放入表单的数据。因此，我收到一个 jinja 错误：

jinja2.exceptions.UndefinedError: 'form' is undefined 它指向我的家乡路线：

return render_template('home.html', article=article)

和我的 home.html 说

<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>
            <a href="#" class="btn read-more">Read More</a>
        </div>
    </div>
</div>
{% endfor %}

我的理解是，我的主路由不知道图片数据，所以我尝试使用 filename=picture_file 将参数定义在我的主路由中，然后错误提示

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)