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

Question

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

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

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

希望我能说清楚！ 我正在使用node.js并表达。

Answer 1

您需要路由到资产。

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

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

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

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