Обслуживание углового интерфейса с Flask не отображает изображения - PullRequest
Новая
       32

Обслуживание углового интерфейса с Flask не отображает изображения

1 голос
/ 25 сентября 2019

Я создал веб-сайт Angular, который отправляет запросы к серверной части, разработанной мной с помощью Flask.Моей первой миссией было обслуживание веб-сайта с помощью Flask.

После этого ответа здесь мне удалось обслуживать свой веб-сайт на сервере Flask.

Единственная проблема в том, что изображения, которые я использовал на сайте, не отображаются.До обслуживания сайта с помощью Flask все было в порядке.Но не я получаю сообщения об ошибках вроде этого: 

GET http://localhost:5000/assets/img/green_circle.png 404 (NOT FOUND)

Это происходит со всеми изображениями, которые я хочу показать.Моя структура папок выглядит так: 

mainFolder
    |-static
    |   |- contains all js and css files
    |   |- assets (CONTAINS IMAGES)
    |-templates
    |   |-index.html
    |-server.py

Мой index.html файл выглядит так: 

<!doctype html>
<html>
<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Free Angular Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Free,Angular,Dashboard,Typescript">
    <link rel="icon" href="assets/favicon.ico">
    <title>WINGS Smart Parking System</title>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    // Shared ID
    gtag('config', 'UA-118965717-3');
    // Angular ID
    gtag('config', 'UA-118965717-4');
  </script>
</head>
<body class="app">
  <!-- App Loading... -->
<script src="/static/runtime.js"></script>
<script src="/static/polyfills-es5.js" nomodule></script>
<script src="/static/polyfills.js"></script>
<script src="/static/styles.js"></script>
<script src="/static/scripts.js"></script>
<script src="/static/vendor.js"></script>
<script src="/static/main.js"></script>
<script src="/static/views-dashboard-dashboard-module.js"></script>
<script src="/static/views-buttons-buttons-module.js"></script>
<script src="/static/views-chartjs-chartjs-module.js "></script>


</body>
</html>

У вас есть идеи?Заранее спасибо!

1 Ответ

1 голос
/ 25 сентября 2019

В server.py добавьте static_proxy, чтобы обеспечить обслуживание вспомогательных файлов. 

from flask import Flask, send_from_directory

app = Flask(__name__)


@app.route('/<path:path>', methods=['GET'])
def static_proxy(path):
  return send_from_directory('./', path)


@app.route('/')
def root():
  return send_from_directory('./', 'index.html')


if __name__ == '__main__':
  # This is used when running locally only. When deploying use a webserver process 
  # such as Gunicorn to serve the app.
  app.run(host='127.0.0.1', port=8080, debug=True)


@app.errorhandler(500)
def server_error(e):
  return 'An internal error occurred [main.py] %s' % e, 500

Дополнительный ресурс

Python (Flask), обслуживающий Angularфайл index.html проекта

Дополнительное примечание от asker

Чтобы можно было отправлять запросы серверу Flask, обслуживающему угловой интерфейс, в app.run() Вы также должны установить threaded=True.

...