为什么以下 Node JS 代码不会拒绝提供 STATIC png 文件？

Question

对于管理员，我花了一整天的时间搜索、尝试和重试许多处理 Node Js、Express 和静态文件的不同答案，我在 Whosebug 和互联网上找到了这些文件，但我仍然没有找到一个对我有一点帮助的代码或提示或线索。所以，如果我问的这个问题与其他问题非常相似或重复，我深表歉意。我很沮丧。

话虽如此，我在网上搜索了一个非常非常简单的例子来说明我正在尝试做的事情。然后，我按照教程进行了 TEETH，但它仍然无法按预期工作。我想要做的就是让 NodeJs 服务器提供静态文件，如图像和 javascript。这是代码。

NodeJS 或 Server.js

const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.send('Hello World!'); <--- This does not load index.html.
});

//app.get("/",function(req,res){
//    res.sendFile(__dirname + '/index.html'); <---this what I added to load index.html
//});

app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));

index.html

  <html>
  <head>
  <title>Hello World!</title>
  </head>
  <body>
  <h1>Hello, World!</h1>
  <img src="shark.png" alt="shark">
  </body>
  </html>

这个简单代码的有趣之处在于，在客户端（浏览器）控制台中没有任何错误。

那么，这段代码有什么问题？为什么此代码拒绝提供简单的图像文件？

Answer 1

如果 server.js 已经在 public 目录中，那么 express.static('public') 将寻找一个名为 public 的子目录，它实际上是在寻找：

__dirname + '/public`

它不会找到那个目录，所以不会匹配那里的任何东西。这就是为什么您的 express.static() 无法正常工作。

一般来说，您的服务器源代码不应位于 public 目录中，因为当您这样设置时，您会将服务器源代码暴露给 public。

我建议这种布局：

  project name
     server
         server.js
     public
         index.html
         shark.png

然后，您可以使用

app.use(express.static(path.join(__dirname, "../public")));

我喜欢这种布局，因为 public 文件与私有服务器文件位于完全独立的树中，但两者都位于项目中。

另请注意，图像等资源应使用绝对 URL 而非相对 URL 进行引用，因此请更改：

<img src="shark.png" alt="shark">

至

<img src="/shark.png" alt="shark">

两者都可以在这个简单的示例中使用，但是一旦您开始在 HTML 文件（例如 /categories/trees.html 上设置路径，那么 <img> 标签将具有"shark.png" 的 src 最终会导致对 /categories/shark.png 的请求，并且将不再有效。而如果 src 是 "/shark.png" 它将继续工作并且独立于 HTML 页面的路径（这是你想要的）。

为什么以下 Node JS 代码不会拒绝提供 STATIC png 文件？

Why won't the following Node JS code refuse to serve a STATIC png file?

html

static

node.js

express