Question

我的问题与使用python字典和jinja2创建for循环有关。我想将每个键/值对的值用作HTML中元素的源属性。

--- HTML / jinja2 ---

{% for song, mp3 in song_dict.items() %}
        <li> {{ song }} :<audio controls> <source  src="{{ mp3 }}" type ="audio/mpeg"></audio>{{ mp3 }}</li>
{% endfor %}

python代码段：

def home():    
    song_dict = {"Pumba":'"static/PUMBA_1.mp3"', "You're Feet":'"static/youre feet mix 1.8.17_1.mp3"',
     "ratatatatata":'"static/ratatat.mp3"',
    "12 | 8":'"static/12_8 NO CLICK.mp3"', "Sage to Your Internet" : '"static/sage to your internet.mp3"',
    "EB":'"static/EB DEMO MIX NO CLICK.mp3"'}

    return render_template("pet_friend.html",
                            song_list = song_list,
                            song_dict = song_dict
                            )

我可以在音频播放器之后打印文本，但无法将路径传递到音频元素的src属性。

任何帮助/建议将不胜感激！

Answer 1

路径应为'/static/PUMBA_1.mp3'，而不是'"static/PUMBA_1.mp3"'（带/）

但是，如果您已经将文件存储在静态文件夹中，则在jinja模板中提供文件的最简单方法是调用此函数：url_for('static',filename=your_file.mp3)

它会自动创建一个指向您的静态文件夹的路径，并允许您更改它而无需进行任何修改（因此您可以删除song_dict中的所有“静态”）。

Jinja模板：

{% for song, mp3 in song_dict.items() %}
    <li>{{ song }}:<audio controls> 
                   <source src="{{ url_for('static',filename=mp3) }}" type ="audio/mpeg">
                   </audio>{{ mp3 }}</li>
{% endfor %}

查看（不包含每个“静态/”和双' "" '）：

def home():
    song_dict = {"Pumba":'PUMBA_1.mp3', "You're Feet":'youre feet mix 1.8.17_1.mp3',
     "ratatatatata":'ratatat.mp3'}

    return render_template("pet_friend.html",
                            song_dict = song_dict
                            )

Answer 2

这是代码段。

<audio controls>
    <source src="{{ url_for('static', filename = filename) }}" type="audio/mpeg">
</audio>

Answer 3

要在Jinja中使用字典和列表，请像在python中一样使用它：

{{dictionary["key"]}}
{{mylist[index]}}

将分别给出字典值，其中dictionary [“ key”：“ value”]和位于“ index”上的项。按照其他答案的建议，使用“ for”遍历它们。

如何将jinja2变量插入html元素的属性中？

3 个答案: