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應用程序會執行此操作。