使用 Flask 服务 Angular 前端不会渲染图像答案

【问题标题】：Serving Angular front end with Flask does not render images使用 Flask 服务 Angular 前端不会渲染图像
【发布时间】：2019-09-25 14:56:42
【问题描述】：

我创建了一个 Angular 网站，该网站向我使用 Flask 开发的后端发出请求。我的第一个任务是使用 Flask 为网站提供服务。

按照这个答案here，我设法在 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>

你有什么想法吗？提前致谢！

【问题讨论】：

标签： angular image flask

【解决方案1】：

在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) serving Angular project's index.html file

提问者的补充说明

为了能够从为 Angular 前端提供服务的 Flask 服务器向自身发出请求，在 app.run() 中您还必须设置 threaded=True。

【讨论】：

我试过这个并且很好地加载了主页。但是当我尝试从浏览器 url 导航角度应用程序路径时，它返回 404。这对你有用吗？