Web应用程序上的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进行表达。

Answer 1

您需要路由到资产。

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

无论何时使用资产，都有多种方法可以将其包含在项目中。

在您的情况下，无论何时加载图像，浏览器实际上都是使用客户端的网络调用来加载的。不是服务器端。因此，客户端代码无权访问内部路径（例如/usr/local/种路径）。每当他们获取与主机有关的东西时，就您而言，localhost就是这样，获取/image.png就是获取localhost/image.png，但是您的应用程序没有路由到那些图像文件的路径。因此，我们为express.static

完成的所有资产创建路线

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