Question

我正在开发一个小型Web应用程序，并且希望使其尽可能整洁（没有api或框架*没有表达）。

然后我开始遇到第一个问题。

一旦我使用nodejs渲染html文件，通常从html内部调用的文件引用就“不存在”？

获取http://localhost:3000/Footage/UserTemplateIcon.png 404（未找到）

如果我尝试将html作为单个文件运行（没有节点），则会找到我的图像，但是由于某种原因，nodejs不会显示

这是我的文件结构

我的nodejs代码：

const http = require('http'),
    port = 3000,
    fs = require('fs'),
    events = require('events'),
    util = require('util');
var myEmitter = new events.EventEmitter();


const server = http.createServer((req, res) => {
    if(req.url === "/"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end("Main page");

    } else 
    if(req.url === "/feed"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/Feed/index.html', 'utf8');
        myReadStream.pipe(res);
    }
    else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/404/index.html', 'utf8');
        myReadStream.pipe(res);
    }
});

server.listen(port, () => {
    console.log(`Server running on ${port}`);
})

和我的html

<html>
<head>
   <div class="headerUserIcon"><img src=".\Footage\UserTemplateIcon.png"></div>
</head>
<body>
</body>
</html>

我发现了多种表达方式，人们都说您必须通过表达

来提供静态文件

app.use（express.static（'src'））;

但我想不加说明地这样做。

* update：在指向我的文件的链接之前添加\。\会向我返回此错误

不允许加载本地资源： file：//.//Footage/UserTemplateIcon.png

Answer 1

您的程序包含以下代码：

if(req.url === "/"){
    /* send something */
} 
else if(req.url === "/feed"){
    /* send something  else*/
}
else {
   /* send an error */
}

如果要发送其他文件（例如.png），则每个文件都必须出现在if / else if级联中，或者出现在switch语句中，或者以某种req.url解析的形式出现。普通节点http服务器对任何文件系统一无所知。它被完全剥夺了。（这与nginx或apache不同。）

Express提供了一个很好的框架，可以教节点html服务器有关文件系统，内容类型，路由，流，管道以及其他方面的知识。没有表达，您需要自己教html服务器有关png文件，css和js等的信息。

Answer 2

<img src=".\Footage\UserTemplateIcon.png">不能在HTML中工作，因为大多数浏览器不允许您通过file://协议加载图像。

要解决此问题，您将需要设置一个将服务于\Footage\UserTemplateIcon.png的HTTP端点-该端点可以与Web应用程序位于同一服务器，也可以通过单独的应用程序（即python -m SimpleHTTPServer）。 / p>

P.S。我强烈建议使用express来提供静态文件，因为它直接与您的用例匹配。

Node.js无法从html参考中找到图片

2 个答案: