如何使用 Flask 安装 CSS 个模板？

Question

这是我的文件目录：

app
    - static
      [--] css (inside static)
      [--] images (inside static)
      [--] js (inside static)
    - templates

但图像仍无法正确加载： http://i.imgur.com/Mh71ko9.png

有谁知道为什么图像无法正确加载？

Answer 1

您只是将 HTML 从网站转储到您的模板文件夹中，图像的所有 href 和 src 属性和 CSS 仍在使用相对链接。这些需要转换才能使用 Flask 的静态文件功能。

例如，要使 CSS 正常工作，请更改此行：

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />

对此：

<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel='stylesheet' type='text/css' />

与图片类似，您可以更改：

<img src="images/logo.png" title="Flat style" />

到

<img src="{{ url_for('static', filename='images/logo.png') }}" title="Flat style" />

您需要对 HTML 中引用的所有静态文件执行此操作。

请注意，您的 Flask 应用需要导入 url_for

from flask import Flask, render_template, url_for

How to install CSS templates with Flask?