Nodejs无法从html参考中找到图像答案

【问题标题】：Nodejs can't find images from html referenceNodejs无法从html参考中找到图像
【发布时间】：2019-03-18 21:59:58
【问题描述】：

我正在开发一个小型 Web 应用程序，我想让它尽可能干净（没有 api 或框架 * 没有表达）。

我一开始就遇到了我的第一个问题。

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

GET 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>

我发现了多种使用 express 的解决方案，人们说你必须通过 express 来提供静态文件，例如

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

但我想不加快递。

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

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

【问题讨论】：

标签： javascript html node.js

【解决方案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 服务器有关文件系统、内容类型、路由、流、管道和其他方面的知识。如果没有 express，您需要自己教 html 服务器有关您的 png 文件、css 和 js 等。

【讨论】：

【解决方案2】：

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

要解决此问题，您需要设置一个 HTTP 端点来提供 \Footage\UserTemplateIcon.png - 这可以是与您的 Web 应用程序相同的服务器，也可以是通过单独的应用程序（即 python -m SimpleHTTPServer）。

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

【讨论】：

【解决方案3】：

我会强烈推荐使用 express。允许渲染图像的最简单方法是将它们放入public/images 目录。

const express = require('express')
const app = express()
const port = 3000

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile('index.html', {root: __dirname})
})

app.listen(port)

现在跟随 html:

<html>
    <body>
        <img src='images/foo.png'>
    </body>
</html>

将渲染带有路径public/images/foo.png的图像。

希望对你有帮助；）

【讨论】：