404（未找到）网络应用程序上的图像文件

Question

我正在建立一个网站，并在此过程中使用 imgur 来存储我在其中使用的图像，但我决定在我的应用程序中创建一个文件夹来存储它们。 由于我不再使用 imgur，我需要更改查找图像的路径，这就是问题出现的地方，我找不到图像。 结构如下：

webapp_folder
    |_node_modules
    |_image_folder
    |_public_folder
    |_views
       |_partials_folder
       |_main.js
    |_app.js
    |_package.json

在main.js 中，我使用 image_folder 中的一张图片，图片的路径如下所示：src="../image_folder/image.png" 但这就是我得到 404 错误的地方。 我尝试将图像放在与 main.js 相同的文件夹中，因此路径看起来像 src="image.png" 但仍然出现此错误。 所以我想这不是路径的问题，但我不知道它可能是什么。

希望我能说清楚！ 我正在使用 node.js 和 express。

Answer 1

您需要为资产创建路线。

app.use(express.static('image_folder')

每当您使用资产时，都可以通过多种方式将其包含在您的项目中。

在您的情况下，每当加载图像时，它实际上是由浏览器使用来自客户端的网络调用加载的。不是服务器端。因此客户端代码无法访问内部路径（例如：/usr/local/ 有点路径）。每当他们获取与主机相关的东西时，也许在您的情况下localhost 所以，获取/image.png 正在获取localhost/image.png，但您的应用程序没有指向这些图像文件的路由。所以，我们为express.static完成的所有资产制作路线

另一种方法是您实际上可以require 图像。因此，捆绑器（具有适当的配置）创建一些公共文件夹并将资产放入该文件夹。 react/vue 应用程序默认执行此操作。