烧瓶 |如何将丢失的 (404) 资产文件夹连接到从 bootstrap studio 导出的 html

Question

我使用 bootstrap studio 创建了一个 HTML 页面，我需要将其用于 flask。

HTML 页面运行正常，所有资产都来自 asset 目录。

我设置了烧瓶 app.py，将带有 index.html 的 /asset 目录移动到烧瓶中的 /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

Answer 1

您的页面指向 /assets 下的资源，但 Flask serves them under /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')

您可以查看所有可以在初始化时设置的参数in the documentation。

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

另外请记住，如果您打算在生产系统上部署您的项目，您应该考虑配置您的网络服务器来为您提供静态文件，而不是让 Flask 自己这样做。 Web 服务器非常擅长提供静态文件，它们会为您应用压缩、缓存和 ETag headers 等功能；在最适合的地方使用他们专门构建的代码是明智的。

烧瓶 |如何将丢失的 (404) 资产文件夹连接到从 bootstrap studio 导出的 html

Flask | How to connect missing (404) assets folder to html exported from bootstrap studio

html

css

python

flask

bootstrap-studio