來自 express static 文件夾的圖像未出現在客戶端

Question

我有 Node.js 應用程序，由 express 提供服務，我的前端是用 React.js 制作的。 我有一個 static 文件夾，其中包含在客戶端似乎無法訪問的圖像。

上傳圖片的示例路徑為：

localhost:3000/public/images/avatar.jpg

這是我的 Node.js 應用程序中的代碼，而不是：

import express from 'express';
import path from 'path';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import cors from 'cors';
import dotenv from 'dotenv';

dotenv.config();

import userRoutes from './routes/userRoutes.js';
import uploadRoutes from './routes/uploadFileRoutes.js';

const app = express();

app.use(express.json());
app.use(cors());


const __dirname = path.resolve();

app.use('/public/images', express.static(__dirname + '/public/images'));

app.use('/', userRoutes);
app.use('/', uploadRoutes);

const PORT = process.env.PORT || 5000;

mongoose
  .connect(process.env.CONNECTION_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
  })
  .then(() =>
    app.listen(PORT, () =>
      console.log(`Server Running on Port: http://localhost:${PORT}`)
    )
  )
  .catch((error) => console.log(`${error} did not connect`));

mongoose.set('useFindAndModify', false);

這是我的后端文件夾結構

這是我在 HTML 方面的圖像 src 路徑

關於我做錯了什么的任何指針/想法？

Answer 1

在這種情況下，您不需要調用path.join() ，只需使用__dirname和 append 路徑的其余部分。

以下語法應該適合您：

app.use('/public/images',express.static(__dirname + '/public/images'));

另外，我看到您已經指定了__dirname的值。 您不必這樣做，它是一個環境變量，它本身包含執行文件的目錄的絕對路徑。

嘗試刪除語句：

const __dirname = path.resolve()