Question

我有一个小型网站，但是该图标无法正常工作：这是代码：

base.html

<html>
    <head>
        <link rel="icon" href="static/icon.png" sizes="32x32">
        <title>
            {% block title %}{{title}}{% endblock %}
        </title>
        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="page_container">
            {% block content %}
            <div class="container-fluid" style="margin-top: 100px;">
                {% with messages = get_flashed_messages() %}
                {% if messages %}
                    {% for message in messages %}
                    <div class="alert alert-info" role="alert">{{message}}</div>
                    {% endfor %}
                {% endif %}
                {% endwith %}

                {# application content needs to be provided in the app_content block #}
                {% block app_content %}{% endblock %}
            </div>
            {% endblock %}
        </div>
    </body>
</html>

浏览器在此模板上显示图标：

about.html

{% extends "base.html" %}
{% block app_content %}
<div id="about_author_photo">
    <img src="static/VVphoto.jpg" height="400px" width="270px">
</div>
{% endblock %}

但不是这样的：

poems.html

{% extends "base.html" %}
{% block app_content %}

    {% for poem in poems.items %}
        {% include "_poem.html" %}
    {% endfor %}

    <div class="pagination-links">
    {% for page in poems.iter_pages() %}
        {% if page %}
            {% if page != poems.page %}
                <a href="{{ url_for('poems', page_num=page) }}">{{ page }}</a>
            {% else %}
                <span style="color: white;">({{ page }})</span>
            {% endif %}
        {% else %}
            <span class=ellipsis style="color: white;">…</span>
        {% endif %}
    {% endfor %}
    </div>

{% endblock %}

这是它们两个的视图：

@app.route('/')
@app.route('/about')
def about():
    return render_template('about.html', title='З Гумором Про Все На Світі')


@app.route('/poems/<int:page_num>')
def poems(page_num):
    poems = Poem.query.paginate(per_page=5, page=page_num, error_out=True)
    return render_template('poems.html', title='Вірші',  poems=poems)

我尝试将图标添加到{% extends "base.html %}行下的tepmlate诗中，但无效

Answer 1

图标网址目前是相对的。您应该使用{{ url_for('static', filename='icon.png') }}

更多信息https://flask.palletsprojects.com/en/1.1.x/tutorial/static/

Answer 2

您的图标位置使用的是相对于当前页面的路径。

<link rel="icon" href="static/icon.png" sizes="32x32">

在“关于”或主页上，您将使用domain.com/或domain.com/about作为URL。这将导致浏览器在domain.com/static/icon.png处查找图标。在诗歌页面上，您似乎总是会停留在特定页面上，例如domain.com/poems/1，这将使相对路径为domain.com/poems/static/icon.png。

要确保路径始终相对于域的根，请在路径前加上/，这样在您的base.html中它应该看起来像这样

<link rel="icon" href="/static/icon.png" sizes="32x32">

HTML图标未在我网站的某些页面上显示，但在其他页面上显示

2 个答案: