• • 此问题在此处已有答案**：

How to serve static files in Flask（24个答案）
13小时前关门了。
当尝试将CSS和JS文件链接到HTML文件时，它从URL而不是从文件中获取它!!这意味着如果尝试链接"../static/style.css"，它会尝试从URL中找到它并链接"subjects/static/style.css"

• • 注意：**当尝试缩短URL时，它起作用了。

下面是Python代码

@app.route("/subjects/<subject>/<LO_id>")
@app.route("/subjects/<subject>/<LO_id>/")
def LO(subject, LO_id):
    return render_template("LO.html")

下面是HTML代码

{% extends "layout.html" %}
{% block body %}
    <main class="LO">
        <h1>PH.1.05</h1>
        <hr>
        <div class="concepts">
            <h2>Concepts</h2>
            <ul>
                <div class="concept">
                    <li>Measurement Error Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
            </ul>
        </div>
        <hr>
        <div class="extra-resources">
            <div class="buttons">

            </div>
            <h2>Extra Resources</h2>
            <h3>References</h3>
            <ul>
                <li><a href="#">Zumbdall - Chapter 6</a></li>
                <li>Campbell - Chapter 7</li>
                <li>Serway - Lesson 2</li>
                <li>Haliday</li>
            </ul>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt voluptatum et error cum assumenda, sapiente in quaerat quidem exercitationem neque sequi ratione soluta ducimus iste voluptatibus atque nemo iusto? Earum!</p>
            <p>You can also see this <a href="#">channel</a> for more visual representation</p>
        </div>
    </main>
    <!-- <script src="../static/xdPlayer/player.js"></script> -->
    <script src="../static/script.js"></script>
{% endblock %}

我试着让这个模板的网址更短，而不是缩进它在一个很长的网址，它的工作!但这不是我想要的。