我正在使用flask制作一个网站, HTML 工作正常,网站加载,但由于某种原因,HTML 和 CSS 无法链接:
我使用 url_for Flask 命令,但它仍然不起作用,当我打开网站并检查它时,看起来链接正在工作,但 css、javascript 等文件夹是空的
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StoreScan</title>
<link rel="icon" href="{{url_for('static', filename='style/assets/dollars.jpeg')}}">
<link rel="stylesheet" href="{{url_for('static', filename='style/bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{url_for('static', filename='style/style.css')}}">
<script defer src="{{url_for('static', filename='app/app.js')}}"></script>
{% block head %}{% endblock %}
</head>
<body>
<h1 class="display-1 text-center mt-4">
<u>StoreScan</u>
</h1>
<div class="mt-5 row d-flex justify-content-center">
<div class="card bg-light" style="width: 22rem;">
<div class="card-header">Authentication</div>
<div class="card-body">
<h5 class="card-title">Welcome Back!</h5>
<p class="card-text"></p>
<button class="btn btn-light btn-outline-dark">Login</button>
<h6 class="mt-3">New here? </h6>
<button class="btn btn-light btn-outline-dark">Register</button>
</div>
</div>
<div class="card bg-light ml-5" style="width: 22rem;">
<div class="card-header">Search</div>
<div class="card-body">
<h5 class="card-title">What do you want to find?</h5>
<p class="card-text"></p>
<form class="form-inline" method="POST">
<div class="form-group mt-3">
<input class="form-control mr-2" name="content" id="content" type="text" placeholder="Your item.">
<button class="btn btn-light btn-outline-dark">Search</button>
</div>
<p>
<input type="radio" name="options" value="ebay" id="option1" method="POST"> Ebay <br>
<input type="radio" name="options" value="amazon" id="option2" method="POST"> Amazon <br>
</p>
</form>
</div>
</div>
</div>
{% block body %}{% endblock %}
</body>
</html>
调试器:
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=style.css HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=jquery.js HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=debugger.js HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=console.png HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=ubuntu.ttf HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=console.png HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "GET /static/app/app.js HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:35:10] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET /static/app/app.js HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:37:07] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET /static/app/app.js HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET /static/app/app.js HTTP/1.1" 404 -
最佳答案
Flask 找不到您的静态文件夹。它位于哪里?除非您修改了蓝图,否则 Flask 将在主应用程序的同一级别查找 satic 文件夹。
因此,假设您有运行应用程序的 .py 文件 - 在下面的示例中为flask_server.py - 在“web”目录的第一级内,flask 将在同一级别查找静态文件夹 - 相同对于模板文件夹来说是正确的:
希望它适合您。 :)
关于javascript - 无法将 CSS 和 JavaScript 链接到 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60467938/