Question

我正在使用Flask开发一个小型博客页面。我设置了一个管理页面，可以在其中创建要显示在（前端）主页上的文章（使用wtforms）。我在“创建文章”表单（在“管理”页面中）中的所有表单字段都保存了各自的输入（标题，图像，PreviewText，内容，类别）。当我单击文章后，它将成功放入sqlite数据库中，并且除了上传的图片以外的所有内容都会显示在首页上。在我的CreateArticleForm中，我正在使用e nctype =“ 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'未定义，它指向我的家庭路线，说：

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)

烧瓶：无法显示上传的图片

2 个答案: