0

我使用bootstrap studio创建了一个HTML我需要用于flask.

HTML 页面运行良好，所有资产都在asset目录中工作。

我设置了烧瓶app.py，将/asset目录移动index.html到烧瓶/templates中render_template。HTML 正在加载，但缺少资产。

我阅读了一篇博客并将资产文件夹复制到该/static目录但无法正常工作。

这是app.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
    games = ['Assassin', 'Call of Duty', 'Cyberpunk', "GTA V"]
    return render_template("home.html", games=games)


if __name__ == "__main__":
    app.run(debug= True)

这是输出

* Detected change in 'c:\\Users\\Haseeb\\OneDrive\\Documents\\MEGAsync\\Freelancing\\Cars Classified market crawler - Ahmed\\web app\\app.py', reloading
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 238-233-787
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/fonts/ionicons.min.css HTTP/1.1" 404 -    
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/css/styles.min.css HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/cargurus_5744444c4a374742344641313533373039547565204a756c2032372031313a32373a30312032303231_4.jpg HTTP/1.1" 404 -   
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/autotrader_4a54444b42323055383833343538383832546875204a756c2031352031353a31353a33332032303231_4.jpg HTTP/1.1" 404 - 
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/autotrader_3554445a41323343323653343033353233546875204a756c2031352031353a31383a30322032303231_22.jpg HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/logo%20white.png HTTP/1.1" 404 -

我的树是这样的

Volume serial number is 4C25-00D7
C:.
│   app.py
│   website design.bsdesign
│
├───static
│   └───assets
│       ├───bootstrap
│       │   ├───css
│       │   │       bootstrap.min.css
│       │   │
│       │   └───js
│       │           bootstrap.min.js
│       │
│       ├───css
│       │       styles.min.css
│       │
│       ├───fonts
│       │       font-awesome.min.css
│       │       fontawesome-webfont.eot
│       │       fontawesome-webfont.svg
│       │       fontawesome-webfont.ttf
│       │       fontawesome-webfont.woff
│       │       fontawesome-webfont.woff2
│       │       FontAwesome.otf
│       │       ionicons.eot
│       │       ionicons.min.css
│       │       ionicons.svg
│       │       ionicons.ttf
│       │       ionicons.woff
│       │
│       └───img
│               adam-stefanca-hdMSxGizchk-unsplash.jpg
│               autotrader_3554445a41323343323653343033353233546875204a756c2031352031353a31383a30322032303231_22.jpg
│               autotrader_4a54444b42323055383833343538383832546875204a756c2031352031353a31353a33332032303231_4.jpg
│               cargurus_5744444c4a374742344641313533373039547565204a756c2032372031313a32373a30312032303231_4.jpg
│               logo white.png
│
└───templates
    │   home.html
    │   index.html
    │   login.html
    │
    └───assets
        ├───bootstrap
        │   ├───css
        │   │       bootstrap.min.css
        │   │
        │   └───js
        │           bootstrap.min.js
        │
        ├───css
        │       styles.min.css
        │
        ├───fonts
        │       font-awesome.min.css
        │       fontawesome-webfont.eot
        │       fontawesome-webfont.svg
        │       fontawesome-webfont.ttf
        │       fontawesome-webfont.woff
        │       fontawesome-webfont.woff2
        │       FontAwesome.otf
        │       ionicons.eot
        │       ionicons.min.css
        │       ionicons.svg
        │       ionicons.ttf
        │       ionicons.woff
        │
        └───img
                adam-stefanca-hdMSxGizchk-unsplash.jpg
                autotrader_3554445a41323343323653343033353233546875204a756c2031352031353a31383a30322032303231_22.jpg
                autotrader_4a54444b42323055383833343538383832546875204a756c2031352031353a31353a33332032303231_4.jpg
                cargurus_5744444c4a374742344641313533373039547565204a756c2032372031313a32373a30312032303231_4.jpg
                logo white.png
4

1 回答 1

0

您的页面指向 下的资源/assets，但Flask 在 下为它们提供服务/static。

你可以解决这个问题：

  • 通过将您的 HTML 更改为指向/static而不是/assets-- 然后请求http://localhost/static/style.css将从C:/static/style.css;
  • 或者通过设置 Flask 以在不同的路径下提供文件 - 然后请求http://localhost/assets/style.css将从以下位置提供C:/static/style.css：
app = Flask(__name__, static_url_path='/assets')

您可以在文档中查看可以在初始化时设置的所有参数。

无论您选择使用哪个，您都需要移动文件——例如，C:/templates/assets根本不使用，所以您可能想要删除它，除非您想访问/[static|assets]/assets/style.css您想要移动C:/static/assets/*到C:/static/.

还要记住，如果你打算在生产系统上部署你的项目，你应该考虑配置你的 web 服务器来为你提供静态文件，而不是让 Flask 自己这样做。Web 服务器非常擅长处理静态文件，它们会为您应用压缩、缓存和ETag 标头等内容；明智的做法是在效果最好的地方使用他们专门构建的代码。

于 2021-08-12T00:45:17.903 回答