找不到Webpack和React Image

Question

我看过so many different resources（some not linked和this one是最接近我的问题）。他们似乎都没有解决我的问题。

我是React和Webpack的新手。我找到了this tutorial，并按照它创建了一个基本网站。

但是，我在显示图像时遇到问题。我没有显示图像，而是得到了“文件损坏”图像，控制台显示GET http://127.0.0.1:5000/public/images/smiley.png 404 (NOT FOUND)

我已经安装了Webpack图像加载器，并且在我的React代码中使用require。似乎webpack正在查找图像，因为如果更改图像名称，则会收到类似Uncaught Error: Cannot find module '../images/smiley.png'的错误，该错误会使整个网站崩溃，而不是404错误。

这是我的文件夹结构：

当我使用npm run watch和python server.py（分别来自static文件夹和server文件夹）运行项目时，一个带有{{1}的public文件夹}出现在smiley.png文件夹中。

我有一个预感，问题是我的Flask的配置方式使其不响应请求，因为它认为dist文件夹已超出限制。但这只是预感，在这种情况下，我不知道如何解决。

可以找到我的代码here。任何帮助将不胜感激。

编辑：

根据我的预感，我在server.py中添加了以下内容：

public

但这也没有用-我仍然收到404。

编辑2：

由于@Joost，我们发现使用@app.route("/public/<path:path>") def get_public_file(path): print("getting something from public: {}".format(path)) return send_from_directory("public", path) 可以将图像正确放置在app = Flask(__name__, static_folder="../static", template_folder="../static")。

但是，这会使Flask无法确定http://127.0.0.1:5000/static/images/smiley.png的位置，因为它位于bundle.js文件夹中。

添加

dist

到@app.route("/dist/<path:path>") def get_dist_file(path): print("getting something from dist: {}".format(path)) # this ran return send_from_directory("dist", path) 并没有帮助-我仍然在检查器中得到server.py。

所以现在的诀窍是弄清楚如何保持笑脸服务，并让烧瓶也提供GET http://127.0.0.1:5000/dist/bundle.js net::ERR_ABORTED 404 (NOT FOUND)文件。

编辑3：

我刚刚发现了使其工作的一种非常粗略的方法，它是如此的粗略，以至于我什至不打算将其发布为答案，因为我想要的东西不太粗略。

使用@Joost的bundle.js并将以下内容添加到app = Flask(__name__, static_folder="../static", template_folder="../static")中是可行的。

server.py

此解决方案的问题在于，我真的不应该使用@app.route('/<path:path>') def static_file(path): print("getting static file {}".format(path)) if path.startswith("public/"): path = "dist/" + path print("in public folder; path changed to: {}".format(path)) return app.send_static_file(path) ，因为它非常不安全，并且包含这样的send_static_file语句似乎容易出错。我们将不胜感激。

Answer 1

我一直忽略了应用程序的运行来源，对此感到抱歉。

到目前为止，最简单的解决方案是将静态文件夹设置为其他文件夹：

app = Flask(__name__, static_folder='../static')

我刚刚尝试过，它应该可以正常工作。

您可以在这里找到您的文件：

http://127.0.0.1:5000/static/images/smiley.png

您的捆绑文件将在此处：

http://127.0.0.1:5000/static/dist/bundle.js

由于没有模板文件夹（通常称为模板），因此出现模板错误。因此，在您的templates文件夹中创建一个名为server的子文件夹。然后，不要在template_folder行中指定app = Flask(..)参数，而要保留app = Flask(__name__, static_folder='../static')。

如果由于某种原因，您希望将静态文件与公共文件分开，并且也有一条/public路由，则可能要尝试以下方法：

@app.route("/public/<path:path>")
def get_public_file(path):
    full_path = os.path.join('../static/dist/public/', path)
    head, tail = os.path.split(full_path)
    return send_from_directory(head, tail)

然后您可以转到fullstack_template/static/dist/public/images/smiley.png来访问http://127.0.0.1:5000/public/images/smiley.png中的笑脸。