设置 app.route(/something/) 时，/static/ 的位置更改为 /something/static/<argument>

Question

用index.html加载路由索引((有效-它从base.html扩展而来。路由路径中没有<arguments>的其他一些模板也是如此。

然而，在app.route('/channel/'(中，我看到Flask Server试图从/channel/static/etc而不是/static/etc提供statics(从base.html加载(，因此CSS无法呈现。无论我在那个应用程序中放了什么。route('/here/'(就是Flask试图在那个页面上呈现静态信息的地方：/here/static/etc，因此还有CSS/JS 404。

我已经尝试从以下内容更改base.html中静态内容的加载：

<link href="static/css/font-face.css" rel="stylesheet" media="all">

至

<link href="/static/css/font-face.css" rel="stylesheet" media="all">

这并没有解决问题。我最终得到了一个没有任何内容呈现的空白页面。让我觉得这与app.route((函数有关。

应用程序结构：

<dock>
<bot>
<nginx>
<zigweb>
<app>
<templates>
base.html
etc.html
<static>
<css>
<etc>

我使用的是Flask开发服务器。

控制台加载channel.html

INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:58:08] "GET /channel/launch_logic HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:58:09] "GET /channel/static/images/icon/signally.png HTTP/1.1" 404 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:58:09] "GET /channel/static/images/icon/avatar-icon.png HTTP/1.1" 404 -

控制台加载index.html

INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:19] "GET / HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:20] "GET /static/vendor/animsition/animsition.min.css HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:20] "GET /static/vendor/font-awesome-4.7/css/font-awesome.min.css HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:21] "GET /static/vendor/bootstrap-4.1/bootstrap.min.css HTTP/1.1" 200 -

BASE.HTMLhttps://pastebin.com/9FgqE2z9

CHANNEL.HTML

{% extends "base.html" %}
{% block content %}
<h1>hello</h1>
{% endblock %}

Routes.py(用于信道(((

@app.route('/channel/<username>')
def channel(username):
user = User.query.filter_by(username=username).first()
return render_template('channel.html', user=user)

Answer 1

在base.html中，您已将图像的URL指定为static/images/icon/signally.png。在这种情况下，URL相对于当前路径，因此它变为/channel/static/images/icon/signally.png，因为当前路径的基础是/channel/。

您可以将图像源更改为src="/static/images/icon/signally.png"，它将正确解析路径。

或者，可能更可取的是，您可以使用url_for('static', '<filename>')作为评论中提到的人。在这种情况下，Flask将自动为您解析图像源。其中一个好处是，如果你有一个用于蓝图的自定义静态文件夹，你不需要担心明确地说明它，但你只需要写下文件的相对名称。