文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >当应用程序使用参数flask进行路由时，资产404

问当应用程序使用参数flask进行路由时，资产404
EN

Stack Overflow用户
提问于 2021-09-20 04:43:09
回答 1查看 31关注 0票数 0

我正在开发一个个人web应用程序，其中前端是在第三方(引导)软件中创建的。

我的asset目录在template/asset目录下。

代码语言：javascript
复制
app = Flask(__name__, static_folder="templates/assets")

如果我不带任何参数路由到watch，它就能正常工作，并呈现所有的HTML、css元素

代码语言：javascript
复制
@app.route("/watch")
def watch():
    link = "https://www.youtube.com/watch?v=Uh2ebFW8OYM"
    return render_template('watch.html', link=link)

(works fine) Image for the route at http://localhost:5000/watch

当我添加参数时，我开始得到404错误，并且只得到HTML

代码语言：javascript
复制
@app.route("/watch/<youtuber>")
def watch_video(youtuber):
    link = "https://www.youtube.com/watch?v=Uh2ebFW8OYM"
    return render_template('watch.html', author = youtuber, link=link)

(error) Image for the route at http://localhost:5000/watch/Coreyms

终端抛出404错误

代码语言：javascript
复制
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/Coreyms HTTP/1.1" 200 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/fontawesome-all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/fontawesome5-overrides.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Contact-Form-Clean.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Data-Table.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Article-List.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/Data-Table-1.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/simple-footer.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/style.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/js/agency.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/fontawesome-all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Article-List.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/fontawesome5-overrides.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Contact-Form-Clean.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Data-Table-1.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Data-Table.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/css/style.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/css/simple-footer.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/js/agency.js HTTP/1.1" 404 -

我试着把staticdirectory and also I tried adding thewatchdirectory intoasset目录放到asset directory into the root上，但是什么也没用。

我试着在网上找到解决方案，但特别是解决了这样的问题。

这是我的watch_template.html中的内容

代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Home - Brand</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
    <link rel="stylesheet" href="assets/css/Article-List.css">
    <link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
    <link rel="stylesheet" href="assets/css/Data-Table-1.css">
    <link rel="stylesheet" href="assets/css/Data-Table.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/simple-footer.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body class="d-flex flex-column justify-content-between" id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav"
    data-bs-offset="54"
    style="100vh;">
    
    <nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark text-uppercase" id="mainNav">
        <div class="container">
            <!-- Start: home page --><a class="navbar-brand" href="{{url_for('home')}}">Home</a>
            <!-- End: home page --><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
                class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive"
                aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <!-- Start: Mid tabs -->
                <ul class="navbar-nav mx-auto text-uppercase">
                    <li class="nav-item"><a class="nav-link" href="{{url_for('list authors')}}">List Author</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{url_for('Subscriptions')}}">Subscriptions</a></li>
                </ul><!-- End: Mid tabs -->
                <!-- Start: right tab -->
                <ul class="navbar-nav ms-auto text-uppercase">
                    <li class="nav-item"><a class="nav-link" href="{{url_for('report_problem')}}">REPORT A
                            PROBLEM<br></a></li>
                </ul><!-- End: right tab -->
            </div>
        </div>
    </nav>
    <header class="masthead">
        <div class="container" style="opacity: 0.98;">
            <div class="intro-text" style="background: #414141;margin-top: 171px;">
                <div class="intro-lead-in"><img id="title-logo-text" src="">
                
                    <h2>You are watching {}'s video on {}</h2>
                    {% block content %}
                        
                    {% endblock content %}
                
                </div>
                <div class="d-flex justify-content-between intro-heading text-uppercase"
                    style="margin-right: 90px;margin-left: 90px;"><a href="#"><i
                            class="fas fa-angle-double-left"></i></a><a href="#"><i
                            class="fas fa-angle-double-right"></i></a></div>
                <div>

                    <head>
                        <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />

                        <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
                        <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
                    </head>

                    <body>
                        <video controls width="90%" autoplay muted>

                            Sorry, your browser doesn't support embedded videos.
                        </video>
                        <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
                    </body>
                </div>
                <div style="margin-right: 90px;margin-left: 90px;margin-top: 90px;"></div>
            </div>
        </div>
    </header><!-- Start: simple footer -->
    <div class="footer-2" style="background: rgb(52,58,64);">
        <div class="container">
            <div class="row">
                <div class="col-2 col-sm-6 col-md-6 align-self-center">
                    <p class="text-start" style="margin-top:5%;margin-bottom:3%;">© 2021 YOUTUBE BEST CHANNELS</p>
                </div>
                <div class="col-12 col-sm-6 col-md-6">

                </div>
            </div>
        </div>
    </div><!-- End: simple footer -->
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <script src="assets/js/agency.js"></script>
</body>

</html>
python
html
css
flask
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-20 05:39:39

您提供了相对路径，您需要更改链接，如下所示

代码语言：javascript
复制
<link rel="stylesheet" href={{url_for('static', filename='bootstrap/css/bootstrap.min.css')}}>

或者，您也可以这样做

代码语言：javascript
复制
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69249177

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档