找不到Webpack和React映像 [英] Webpack and React Image Not Found

问题描述

我查看了

当我使用 npm run watch 和 python server.py (从 static 文件夹和 server 文件夹)，在其中的 public 文件夹中会出现 smiley.png 文件夹.

我很直觉，问题是我的Flask配置为不响应请求，因为它认为 public 文件夹已超出限制.但这只是预感，在这种情况下，我不知道如何解决.

可以在此处找到我的代码.任何帮助将不胜感激.

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

  @ app.route("/public/< path:path>")def get_public_file(path):print(从公众那里得到一些东西:{}".format(path))返回send_from_directory("public"，path) 

但是那也行不通-我仍然收到404.

由于@Joost，我们发现使用 app = Flask(__ name__，static_folder ="../static"，template_folder ="../static")将图像正确放置在<代码> http://127.0.0.1:5000/static/images/smiley.png .

但是，这会使Flask无法确定 bundle.js 的位置，因为它位于 dist 文件夹中.

添加

  @ app.route("/dist/< path:path>")def get_dist_file(path):print(从dist获取内容:{}".format(path))#这次运行返回send_from_directory("dist"，path) 

到 server.py 并没有帮助-我仍然得到 GET http://127.0.0.1:5000/dist/bundle.js net :: ERR_ABORTED 404(找不到)在检查器中.

所以现在的诀窍是弄清楚如何保持笑脸的表情，并让烧瓶也提供 bundle.js 文件.

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

使用@Joost的 app = Flask(__ name__，static_folder ="../static"，template_folder ="../static")并将以下内容添加到 server.py 有效.

  @ app.route('/&path; path>')def static_file(路径):print(获取静态文件{}".format(path))如果path.startswith("public/"):path ="dist/" +路径print(在公用文件夹中；路径更改为:{}".format(path))返回app.send_static_file(路径) 

此解决方案的问题在于，我真的不应该使用 send_static_file ，因为它非常不安全，并且包含这样的 if 语句似乎容易出现很多错误.不胜感激的解决方案.

解决方案

我一直忽略了应用从何处运行，对此感到抱歉.

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

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

由于没有模板文件夹(通常称为模板)，因此出现模板错误.因此，在您的 server 文件夹中创建一个名为 templates 的子文件夹.然后，不要在 app = Flask(..)行中指定 template_folder 参数，而应保持 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/'，路径)头，尾= os.path.split(full_path)返回send_from_directory(头，尾) 

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

I have looked at so many different resources (some not linked, and this one being the closest to my problem). None of them seem to solve my issue.

I'm brand new to both React and Webpack. I found this tutorial and followed it to create a basic website.

However, I'm having issues displaying images. Instead of displaying the image, I get a "broken file" image and the console says GET http://127.0.0.1:5000/public/images/smiley.png 404 (NOT FOUND)

I have installed the Webpack image loader and I am using require in my React code. It looks like webpack is finding the image because if I change the name of the image I get an error like Uncaught Error: Cannot find module '../images/smiley.png' which crashes the whole website instead of the 404 error.

This is my folder structure:

When I run the project with npm run watch and python server.py (from static folder and server folders respectively), a public folder with smiley.png inside of it appears inside of the dist folder.

I have a hunch that the issue is that my Flask is configured in such a way that it does not respond the request because it thinks the public folder is off limits. But that's just a hunch, and I don't know how to fix it if that's the case.

My code can be found here. Any help would be appreciated.

EDIT:

Following my hunch, I added the following to my server.py:

@app.route("/public/<path:path>")
def get_public_file(path):
    print("getting something from public: {}".format(path))
    return send_from_directory("public", path)

But that also did not work - I am still getting a 404.

EDIT 2:

Thanks to @Joost, we found out that using app = Flask(__name__, static_folder="../static", template_folder="../static") puts the image correctly at http://127.0.0.1:5000/static/images/smiley.png.

However, this then causes Flask to not be able to figure out where bundle.js is, since it's located inside the dist folder.

Adding in

@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)

to server.py did not help - I still get GET http://127.0.0.1:5000/dist/bundle.js net::ERR_ABORTED 404 (NOT FOUND) in the inspector.

So now the trick is to figure out how to keep the smiley face served, and have flask serve the bundle.js file as well.

EDIT 3:

I just discovered a really sketchy way of getting it to work, so sketchy that I'm not even going to post it as an answer because I want something that's less sketchy.

Using @Joost's app = Flask(__name__, static_folder="../static", template_folder="../static") and adding the following to server.py worked.

@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)

The issue with this solution is that I really shouldn't be using send_static_file since it's extremely insecure, and that including an if statement like that seems prone to many errors. A different solution would be appreciated.

解决方案

I kept overlooking where the app was running from, sorry about that.

By far the easiest solution is to set you static folder to a different folder:

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

I just tried it, and this should work without a problem.

You can find your file here:

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

Your bundle file will be here:

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

You're getting a template error because you don't have a template folder, which is normally called tempates. So make a subfolder called templates in your server folder. Then, don't specify the template_folder argument in the app = Flask(..) line, but keep it app = Flask(__name__, static_folder='../static').

If, for some reason, you want to seperate your static from your public files and have a /public route as well, you might want to try the following approach:

@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)

You can then access the smiley in the fullstack_template/static/dist/public/images/smiley.png by going to http://127.0.0.1:5000/public/images/smiley.png.

这篇关于找不到Webpack和React映像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！