Javascript 节点应用程序只能正确地为同一子目录中的2个映像中的1个提供服务

我已经搜索了一段时间，试图使用查找类似的内容，只需按照我课程中的一个教科书示例使用节点即可。我知道使用express或类似工具作为静态资源服务器可能会更容易，尽管目前我这样做是为了学习和更好地理解正在发生的事情。我相信这很简单，但我可能忽略了，但如果能帮我找出这个问题，我将不胜感激。谢谢大家!

我有一个简单的createServer函数

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-surge.jpg”被毫无问题地提供，并且在我的页面上可以很好地看到该图像。但是，图像“/public/img/timessquareColor.jpg”存在一些问题。当我在localhost中点击页面时，我收到一个404，表示找不到图像，但内容类型显示为“text/html”，如下面的屏幕截图所示

EDIT我现在意识到它可能是以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>

主页
你好，世界登录页

这是使用azure的我的节点应用程序的登录页



这张照片是2019年在纽约时代广场拍摄的

您的case语句中有一个大写字母：

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

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

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

---

将case语句更改为所有小写：

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

---

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

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

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

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

---

将case语句更改为所有小写：

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

---

非常感谢。正是这样，我太专注于如何服务它，而看着请求，我完全忽略了找到所述图像的理由。我真的很感激，再次谢谢！非常感谢。正是这样，我太专注于如何服务它，而看着请求，我完全忽略了找到所述图像的理由。我真的很感激，再次谢谢！