直接打开html正确,但用nodejs打开就不显示图片

Posted 2023-05-18

写了一个html，直接打开没有问题，但是在nodejs里读取之后，在浏览器输入地址的时候，就不显示网页的图片了。。。
fs.readFile("/login.html", function (err, html)
if (err) throw err;
response.writeHead(200, "Content-Type": "text/html");
response.write(html);
response.end();

原因很简单，在你的代码中
fs.readFile("/login.html",function(err,html) 这句话导致你无法读取图片。
这句话表达的含义是： 我只读取 login.html 这个文件的内容，其他文件内容我都不读取
但是你要知道login.html文件中的每个图片都是外部资源，它们不属于html的内容
比如：假设login.html中有这样一段
<img src="/image/cat.png" />
因为上面的那段代码，现在 /image/cat.png 这个路径里的图片内容你无法读取
解决办法：
先引入 http、fs、url模块(这里省略)

var server = http.createServer( function( req , res ) //创建服务器
var filename = url.parse( request.url ).pathname //获取文件路径
fs.readFile( filename , function( err , html ) //读取html文件以及图片
................. // 这里直接使用filename可能会出错
) // 如果你的图片不在目录文件夹中
｝).listen(8000) // 需这样写： '../'+filename
filename是一个变量，html路径以及图片路径会先后赋值给它 , 这样就保证了我们先后读取了html文件内容和图片内容
在html中 src=”/image/cat.png“ ，这里src指向的是外部资源，我们进入了一个误区：
我们以为图片也属于html的内容。其实不然，一个页面中的所有图片都不属于该页面的内容
它们是外部资源，所以我们读取一个html时，需要单独的去读取里面的图片 参考技术A 。。图片也属于资源啊。 你也要映射图片的url 到 路由里面，然后通过fs 读取 然后response写出来。本回答被提问者采纳

nodejs渲染到页面的理解

一般逻辑都是：

打开页面，前端发请求到服务端，服务端返回数据到前端，前端根据数据生成DOM节点，然后append到DOM中。

 

如果是nodejs渲染到页面，我的理解是：

打开页面，服务端直接把数据查询出来，然后把数据整合成最终的DOM节点，再返回到前端，这时前端只需要append操作，省去其他操作。

减轻客户端的压力。