未找到 Webpack 和 React 图像

Posted 2023-02-21

【中文标题】未找到 Webpack 和 React 图像

【英文标题】：Webpack and React Image Not Found

【发布时间】：2019-06-13 03:20:38

【问题描述】：

我看过somanydifferentresources（somenotlinked和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 文件夹）运行项目时，其中包含smiley.png 的public 文件夹出现在dist 文件夹内.

我有一种预感，问题在于我的 Flask 的配置方式使得它不会响应请求，因为它认为 public 文件夹是不受限制的。但这只是一种预感，如果是这种情况，我不知道如何解决。

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

编辑：

根据我的预感，我在 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)

但这也不起作用 - 我仍然收到 404。

编辑 2：

感谢@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("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)。

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

编辑 3：

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

使用@Joost 的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，因为它非常不安全，而且包括if 这样的语句似乎容易出现很多错误。一个不同的解决方案将不胜感激。

【参考方案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

您收到模板错误，因为您没有通常称为模板的模板文件夹。因此，在您的 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/', path)
    head, tail = os.path.split(full_path)
    return send_from_directory(head, tail)

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

【讨论】：

为了解决这个问题，我应该在我的代码中进行哪些更改？我的代码中没有任何以http://127.0.0.1:5000/ 开头的路径

另外，当我在浏览器中键入它们时，所有这些都给我 404 not found 错误消息

您在哪个文件夹中运行您的应用程序？

服务器从server 文件夹运行（问题中也提到了这一点）

现在可以将笑脸放在http://127.0.0.1:5000/static/images/smiley.png，但主网站（位于http://127.0.0.1:5000/）现在提供500 Internal Server Error 并且不加载任何内容