Python - Flask 应用程序不提供 React 应用程序中使用的图像

Question

我有一个在 Flask 应用程序中托管的 React 项目。

这是项目文件夹：

/simzol/
└── backend/
    ├── app.py
    └── build/
        ├── index.html
        ├── images/
        ├── static/
        │   ├── css/
        │   └── js/
        └── other_files...

PS。构建文件夹是通过使用命令“yarn 构建”

这是 Flask 应用程序初始化程序：

app = Flask(__name__, static_url_path="/static", static_folder="build/static", template_folder="build")

这就是我服务主路由和任何其他不是 API 路径的路径的方式（应该由 React 应用程序处理。如果页面不存在，React 应该返回我编写的相应的 404 未找到页面） :

@app.route("/") 
@app.route('/<path:path>')
def home(path=None):
    try:
        return render_template("index.html"), 200
    except Exception as e:
        return handle_exception(e)

当我运行应用程序并转到主路线时，我看不到图像加载。

我尝试过的：

1. 将图像文件夹移动到静态文件夹中。没有改变任何东西
2. 将

   static_url_path

   更改为空字符串 ("")，将

   static_folder

   更改为“build”。这解决了问题，但是当我直接通过浏览器的url输入字段浏览任何非根页面（例如/contactus）的页面时，我遇到另一个问题，我从flask中收到404错误（没有反应）
3. 我在react src属性中使用相对图像路径，也许改变它可以解决问题，但如果该解决方案有效，我不喜欢它，因为这使得react中的开发更加复杂

Answer 1

我希望将图像加载到生产中的 Flask 应用程序和用于开发的 React 应用程序（使用

npm start

）中。同时，我希望通过react来处理未知页面。
我发现最方便的解决方案是将所有图像放在

public/static/images

而不是

public/images

下，并相应地更改 src 路径。
然后我可以运行

yarn build

并将结果构建文件夹获取到 Flask 应用程序文件夹 (

backend

)。效果非常好。