静态网页img不显示复杂路径名

时间:2019-07-18 01:45:43

标签: html node.js image express

我只是通过节点学习HTML并表达... 我得到了这个404错误页面,该页面显示了预期的URL,例如/ e或/ whatever或/ etc

但是

当我使用/ e / any或任何具有2个路径名的任何文件时,例如/ a / eter

图片未显示

这是我的404页面的代码

<!DOCTYPE html>
<html>

<head>
  <title>404 Error</title>
</head>
<style>
  html,
  body {
    height: 100%;
  }
</style>

<body>
  <div class="container align-middle">
    <div class="jumbotron text-center" style="
            margin-top: 50px;
            margin-right: 50px;
            margin-left: 50px;
            margin-bottom: 50px;
        ">
      <h1>Error 404</h1>
      <h4>hmm, the page seems to be missing</h4>
      <img src="fry.gif" alt="Error Image">
      <p>Please recheck your URL.</p>
      <button onclick="goBack()">Go Back</button>
    </div>
  </div>

  <script>
    function goBack() {
      window.history.back();
    }
  </script>
</body>

</html>

这是我的节点代码

<code>
var fs = require('fs');
var url = require('url');
var express = require('express');
var tynt = require('tynt'); //color
var path = require('path');
require('console-stamp')(console, { pattern: 'dd/mm/yyyy HH:MM:ss.l',colors: {stamp: 'yellow', label: 'white'}}); //timestamp
var PouchDB = require('pouchdb'); //database
var router = express();
var port = 8080;
var site = "/public";

var htmlPath = path.join(__dirname, 'public');
router.use(express.static(htmlPath));

router.get('/favicon.ico', (req, res) => res.sendStatus(204));

router.get('/', function (req, res) {
   console.log('=> ' + tynt.Green('Accessed - ') + 'Index Page');
  res.sendFile( __dirname + '/public/index.html');
});

router.get('/default', function (req, res) {
   var q = url.parse(req.url, true);
   var filename = (__dirname + site + q.pathname + ".html");
   console.log('=> ' + tynt.Green('Accessed - ') + q.pathname + ' page');
  res.sendFile(filename);
});


router.get('*', function (req, res) {
  var q = url.parse(req.url, true);
  var filename = (__dirname + q.pathname);
  fs.readFile(filename, function(err, data) {
  if (err) {
    console.error('=>' + tynt.Red(' Failed to access: ') + filename);
    console.error(err);
    console.info('==> Serving 404 page');
    res.sendFile( __dirname + '/public/404.html');
      } 
    });
  });

var server = router.listen(port, function () {
console.log('Running on port ' + port);
});
</code>

这些是我遇到的控制台日志错误     与/ e

<code>
=> Failed to acess: E:\app/e
=> { [Error: ENOENT: no such file or directory, open 'E:\app/e']
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'E:\\app\\e' }
==> Serving 404 page
</code>

这是/ e

所期望的

但是如果我输入/ e / any,就会出现

<code>
=> Failed to acess: E:\app/e
=> { [Error: ENOENT: no such file or directory, open 'E:\app/e/any']
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'E:\\app\\e\\any' }
==> Serving 404 page
=> Failed to acess: E:\app/e/fry.gif
=> { [Error: ENOENT: no such file or directory, open 'E:\app/e/fry.gif']
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'E:\\app\\e\\fry.gif' }
==> Serving 404 page
</code>

0 个答案:

没有答案