python - 如何将 jinja2 变量插入到 html 元素的属性中?
问题描述
for
我的问题与使用 python 字典和 jinja2创建循环有关。我想使用每个键/值对的值作为 HTML 中元素的源属性。
---HTML/jinja2---
{% for song, mp3 in song_dict.items() %}
<li> {{ song }} :<audio controls> <source src="{{ mp3 }}" type ="audio/mpeg"></audio>{{ mp3 }}</li>
{% endfor %}
蟒蛇片段:
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 属性。
任何帮助/建议将不胜感激!
解决方案
路径应该是'/static/PUMBA_1.mp3'
而不是'"static/PUMBA_1.mp3"'
(带有前导 /)
但是,如果您已经将文件存储在静态文件夹中,那么在 jinja 模板中提供文件的最简单方法是调用此函数:url_for('static',filename=your_file.mp3)
它会自动创建到您的静态文件夹的路径,并允许您在不修改所有内容的情况下更改它(因此您可以删除 中的所有“静态” song_dict
)。
神社模板:
{% 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 %}
查看(没有每个 "static/" 和 double ' "" '
):
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
)
推荐阅读
- c# - 遍历目录和子目录
- ionic-framework - 我的阿拉伯语首先显示所有数字,然后阿拉伯语单词出现在 Ionic 4
- python-3.x - 模块“instaloader”没有属性“Instaloader”
- c - 如何用零初始化结构的数组字段
- python - 在 python postgres sql 中,创建和插入查询正在执行而没有错误,但是在检查数据库时它没有得到更新
- animation - 如何制作像 VideoScribe 这样的桌面软件?
- java - 多对多关系的连接查询
- javascript - 正则表达式组排除组内的子字符串
- python - Python,问题获取带有按钮的组合框的值
- java - 如何将json转换为没有换行符和其他格式的字符串