使用 WTForms RadioField 子字段在 Flask 中显示图像

Question

我正在使用 WTForm 表单来尝试将路径传输到我想要以 HTML 形式显示的图像。我的表格基本上是这样的

from flask_wtf import FlaskForm
from wtforms import RadioField

class SelectStyleForm(FlaskForm):
     images = RadioField('style image.',
                         choices=[(value1, label1),(value2, label2),...])

我的目标是迭代不同的选择，以在相应的单选按钮旁边显示与每个路径关联的图像。我的 HTML 模板如下所示：

 {% block content %}

 <form method=post>
      {% for subfield in styleform.images %}
           <td>{{subfield}}</td>
           <p>{{subfield.label}}</p>
           <img src="{{url_for('data_path', filename=subfield.label)}}"/>
      {% endfor %}
 </form>
 {% enblock %}

现在，单选按钮与文件名一起显示（写在

<p>

标签中），但我找不到一种方法来使相同的名称影响

filename

。

现在，它所指的值是：

<label for="images-1">value1</label>

有没有办法影响

url_for

函数中的“正确”值？ 请注意，我也接受使用不同选择的

value

部分的解决方案，因为它们应该是相同的路径

Answer 1

好吧，通过摆弄不同的方法，我发现每个子字段都有一个

data

属性，用于存储

label

部分的字符串。

所以我的代码只需更改图像的来源即可工作：

<img src="{{url_for('data_path', filename=subfield.data)}}"/>

我最好的猜测是

.label

属性已经归因于

url_for

函数中的其他内容，并且阻止它访问与标签对应的字符串。

如果我错了，请随时纠正我，或者毫不犹豫地发布更详细的答案！

Answer 2

到目前为止，这是对我有用的解决方案

 <img src="{{url_for('static', filename='images/' + subfield.id + '.png' )}}"/>

这将为您提供第一个问题和第一个选项的图像 URL，如下所示 /static/images/question1-0.png

为什么static：截至 2023 年，图像存储在 /static/images/

subfield.id - 到目前为止，这是唯一有效的。 我尝试过使用

subfield.label

，它给了我这样的结果： 作为网址：

/static/%3Clabel%20for=%22question1-0%22%3EOften-Q1%3C/label%3E

subfield.value

给了我

/static/.png

但 subfield.id 似乎可以工作，因为每个子字段都是唯一的，到目前为止您不需要分配它，它是由 Flask 自动分配的。

提取您可能感兴趣的代码：

app.py

从 Flask 导入 Flask、render_template、request、redirect、url_for 从flask_wtf导入FlaskForm 从 wtforms 导入 RadioField、SubmitField

class SurveyForm(FlaskForm):
    # example = RadioField('Label', choices=[('value','subfield.label'),('value','subfield.label')])

    question1 = RadioField('Question 1', choices=[('Often-A1', 'Often-Q1'), ('Sometimes-A1', 'Sometimes-Q1'), ('Never-A1', 'Never-Q1')])

---

调查.html

  <form action="{{ url_for('survey') }}" method="post">
            {{ form.csrf_token }}
            <div class="row">
                <div class="col-md-6">
                    <h4>{{ form.question1.label }}:</h4>
                    {% for subfield in form.question1 %}
                        <div class="form-check">
                            {{ subfield(class="form-check-input") }}
                            {{ subfield.label(class="form-check-label") }}
                            <img src="{{url_for('static', filename='images/' + subfield.id + '.png' )}}"/>
                            
                        </div>
                    {% endfor %}
                </div>
            </div>
     {{ form.submit }} </form>