时间戳

首页 > 解决方案 > Nodejs无法从html参考中找到图像

javascript - Nodejs无法从html参考中找到图像

问题描述

我正在开发一个小型 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

标签： javascripthtmlnode.js

解决方案

您的程序包含如下代码：

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

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

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

推荐阅读