javascript - Node 应用程序仅正确提供同一子目录中 2 个图像中的 1 个

Question

我一直在寻找一些类似的东西，试图按照我类(class)中的教科书示例使用 just Node 来找到类似的东西。我知道使用express或类似的工具作为我的静态资源服务器可能会更容易，尽管目前我这样做是为了学习和更好地理解正在发生的事情。我确信这是我可能会忽略的简单事情，但任何帮助识别问题的帮助将不胜感激。谢谢 !

我有一个简单的 createServer 函数，看起来像

创建服务器

const server = http.createServer((req,res) => {
  // normalize url by removing querystring, optional trailing slash, and
  // making lowercase
  const path = req.url.replace(/\/?(?:\?.*)?$/, '').toLowerCase()
  switch(path) {
    case '':
      serveStaticFile(res, '/public/home.html', 'text/html')
      break
    case '/about':
      serveStaticFile(res, '/public/about.html', 'text/html')
      break
    case '/public/img/warm-urge.jpg':
      serveStaticFile(res, '/public/img/warm-urge.jpg', 'image/jpg')
      break
    case '/public/img/timessquareColor.jpg':
      serveStaticFile(res, '/public/img/timessquareColor.jpg', 'image/jpg')
      break
    default:
      serveStaticFile(res, '/public/404.html', 'text/html', 404)
      break
  }
})

具有如下所示的服务文件函数

serveStaticFile

function serveStaticFile(res, path, contentType, responseCode = 200) {
  //readFile is an asynchronous method for reading files.
  //__dirname will resolve to the directory the executing script resides in.

  fs.readFile(__dirname + path, (err, data) => {
    if(err) {
      res.writeHead(500, { 'Content-Type': 'text/plain' })
      return res.end('500 - Internal Error')
    }
    res.writeHead(responseCode, { 'Content-Type': contentType })
    res.end(data)
  })
}

当我在本地主机上运行此程序时，图像“/public/img/warm-urge.jpg”的服务没有问题，并且该图像在我的页面上显示得很好。但是，图像“/public/img/timessquareColor.jpg”有一些问题。当我点击 localhost 中的页面时，我收到一个 404 错误，表示未找到图像，但内容类型显示为“text/html”，如下面的屏幕截图所示。

编辑我现在意识到它可能以 text/html 的形式发送，因为这是我为 404 设置的内容类型。话虽这么说，我知道我的根本问题是 Node 不提供服务一个文件，尽管我的困惑在于寻找“为什么？”因为我对两个图像做了完全相同的事情(据我有限的知识)，但只有一个图像有效地合作

我知道我正在尝试将其作为内容类型 'image/jpg' 提供服务，但它似乎不太切中要害。我还验证了我在 html 中以相同的方式调用它们

index.html 片段

<div class="container-fluid">
    <h1 id="topOfPage" class="display-1 text-center" style="font-size:50px">Home Page</h1>     
    <p>Hello World Landing Page</p> 
    <p>this is the landing page for my node app using azure.</p>
    <img src="/public/img/warm-urge.jpg" class="img-fluid" alt="logo">
</div>
<br>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
                <p>This photo was taken in Times Square, NYC in 2019.</p>
        </div>
        <div class="col-sm-8">
            <img src="/public/img/timessquareColor.jpg" class="img-fluid" alt="times square">
        </div>
    </div>
</div>

Answer 1

您的案例陈述中有一个大写字母:

case '/public/img/timessquareColor.jpg':

但是您的代码强制所有内容都小写，因此它们永远不会匹配:

const path = req.url.replace(/\/?(?:\?.*)?$/, '').toLowerCase()

<小时/>

将 case 语句更改为全部小写:

case '/public/img/timessquarecolor.jpg':