使用Flask从静态文件夹提供静态文件 [英] Serving static files from static folder with Flask
问题描述
我正在尝试为Flask提供静态mp3文件，以便将这些mp3文件嵌入HTML音频块中.我似乎在正确设置路径时遇到问题，但是我不确定是我的问题出在我的python还是html中.
我的项目概述:
音乐app.py静止的button.jsMDF.mp3范本button.html 我在app.py中的应用初始化看起来像
app = Flask(__ name __，static_url_path ="，static_folder ="static") app.py中的路线看起来像
@ app.route("/< path:filename>")def upload1():返回send_static_file("MDF.mp3") 我的默认路线:
@ app.route("/"，Methods = ["GET"])def home():return render_template("button.html"，title =音乐盒"，name ="MyName"，song1 = songList [0]，song2 = songList [1]，song3 = songList [2]) 我的button.html看起来像
<！DOCTYPE html>< html lang = zh-CN xml:lang"zh-CN"><身体>< o1>< li>{{song1}}</li><音频控件>src = upload1():您的浏览器不支持< code> audio</code>元素.</audio>< li>{{song2}}</li><音频控件>src = upload2():您的浏览器不支持< code> audio</code>元素.< li>{{song3}}</li><音频控件>src = upload3():您的浏览器不支持< code> audio</code>元素.</ol>< script src ="/static/button.js"></script></body></html> 我得到的错误代码是
10.245.81.226--[01/May/2019 04:25:08]"GET/HTTP/1.1" 404-10.245.81.226--[01/May/2019 04:25:08]"GET/static/button.js HTTP/1.1" 404-10.245.81.226--[01/May/2019 04:25:08]"GET/favicon.ico HTTP/1.1" 404- 如果您在 static 文件夹中有音频文件，则可以使用 url_for 在模板中访问它们，例如其他静态文件.可以在此URL
I am attempting to serve static mp3 files with Flask so I can embed these mp3 files in an HTML audio block. I seem to be having an issue setting up the path correctly but I am not entirely sure if my problem is in my python or html.
An outline of my project:
music
app.py
static
button.js
MDF.mp3
templates
button.html
My app initialization in app.py looks like
app = Flask(__name__, static_url_path="", static_folder="static")
The route in app.py looks like
@app.route("/<path:filename>")
def upload1():
return send_static_file("MDF.mp3")
My default route:
@app.route("/", methods=["GET"])
def home():
return render_template("button.html", title="Music Box", name="MyName", song1=songList[0], song2=songList[1], song3=songList[2])
And my button.html looks like
<!DOCTYPE html>
<html lang=en-US xml: lang"en-US">
<body>
<o1>
<li> {{song1}}</li>
<audio controls>
src=upload1():
Your browser does not support the <code>audio</code> element.
</audio>
<li> {{song2}}</li>
<audio controls>
src=upload2():
Your browser does not support the <code>audio</code> element.
<li> {{song3}}</li>
<audio controls>
src=upload3():
Your browser does not support the <code>audio</code> element.
</ol>
<script src="/static/button.js"></script>
</body>
</html>
The error code I get is
10.245.81.226 - - [01/May/2019 04:25:08] "GET / HTTP/1.1" 404 -
10.245.81.226 - - [01/May/2019 04:25:08] "GET /static/button.js HTTP/1.1" 404 -
10.245.81.226 - - [01/May/2019 04:25:08] "GET /favicon.ico HTTP/1.1" 404 -
If you have audio files in the static folder you can access them in templates using url_for as like other static files. Documentation of serving static files can be found in this URL.
Here I am showing an example of getting audio files URL in templates. I have passed the list of files from Flask app to the templates.
Directory structure:
├── app.py
├── static
│ ├── demo1.mp3
│ ├── demo2.mp3
│ └── demo3.mp3
└── templates
├── audio.html
app.py:
from flask import Flask, render_template
app = Flask(__name__, static_folder='static')
@app.route('/')
def index():
audio_files = ["demo1.mp3", "demo2.mp3", "demo3.mp3"]
return render_template('audio.html', audio_files=audio_files)
audio.html:
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h2>Serving audio files from Flask</h2>
{% for file in audio_files %}
<audio controls>
<source src={{ url_for('static', filename=file) }} type="audio/mpeg">
</audio>
{% endfor %}
<p>Click on play icon to play</p>
</body>
</html>
Output:
这篇关于使用Flask从静态文件夹提供静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
