Как заставить Flask распознавать файлы CSS и JS в статической папке?

Question

Я не могу заставить колбу запустить мои css и js файлы. Он просто открывает страницу, где отсутствуют все изображения, а все текстовые поля, кнопки и т. Д. Повсюду. Итак, я обнаружил, что соответствующие файлы должны находиться в статической папке, и путь должен быть соответствующим образом скорректирован, например: Проблемы с CSS с Flask Web App или Внешний файл JavaScript не добавляется, когдаработает на колбу . Я реализовал это. Но это не очень помогло. Видимо, это общая проблема. Я попробовал несколько других предложений / решений, в основном фокусирующихся на snytax, скобках и т. Д. Здесь, на stackoverflow, но ни один не помог. Итак, моя структура папок выглядит так:

  /myproject
      /static
         /css_image
            script.js
            img1.png
            asdf.css
      /templates
         index.html
      app.py

Вот несколько строк из HTML-кода для указанных выше путей:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">
<script  src="{{ url_for('static', filename='css_image/script.js')}}" data-turbolinks-track="reload"></script>

Мой код с python-flask выглядит следующим образом:

from flask import Flask, url_for, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

После запуска колбы я получаю на выходе следующее:

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/img1.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/asdf.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/script.js HTTP/1.1" 404 -

Я также должен добавить, что HTML-файл работает очень хорошо, когда я открываю его напрямуюнажав на файл.

Answer 1

Когда вы указываете свой html на статический файл, вы должны указать путь от корня статического каталога:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">

Как говорится, это не единственная проблема, поскольку некоторые статические файлы справильный путь не найден.

Что происходит, когда вы указываете путь к статическим файлам при создании приложения? то есть:

app = Flask(__name__,
            static_folder='static',
            template_folder='templates')

[РЕДАКТИРОВАТЬ]: Хотя вы не упомянули две вещи: как называется ваш файл Python и где он находится в вашей структуре? Я скопировал и вставил ваш код, и он отлично работает, о чем свидетельствует этот журнал:

 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/asdf.css HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/script.js HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/img1.png HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /favicon.ico HTTP/1.1" 404 -

Структура каталогов:

app.py
static/
    css_image/
        asdf.css  
        img1.png
        script.js
templates/
    index.html

Answer 2

Вам необходимо добавить подкаталог css_image к аргументу filename функции url_for в шаблоне:

{{ url_for('static', filename='css_image/script.js')}}

---

Примечание: вы, похоже, сделали это навторая строка примера вашего шаблона:

<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">

Однако соответствующая строка из консоли выглядит следующим образом:

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /css_image/img1.png HTTP/1.1" 404 -

Этот путь должен быть сгенерирован как /static/css_image/img1.png и работать правильно,Я предполагаю, что вы, возможно, играли со структурой каталогов, пытаясь это исправить, так что я бы дважды проверил правильность структуры каталогов и кода

Answer 3

хорошо, наконец, я решил это. Такое банальное решение, хотя и оно не имеет для меня никакого смысла, но оно сработало. Поэтому я переместил файлы .css и .js из папки «css_image» и изменил их пути в HTML-файле с:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">
<script  src="{{ url_for('static', filename='css_image/script.js')}}" data-turbolinks-track="reload"></script

на

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='asdf.css')}}">
<script  src="{{ url_for('static', filename='script.js')}}" data-turbolinks-track="reload"></script>

Странно,Мне не нужно было перемещать файлы изображений из папки css_image. Потому что фляга обслуживает их без проблем.