1. 首页

NODE.JS根据URL返回指定的图片

学node的过程碰到的一些坑,当时以为只需将图片放在html页面指定的路径下,访问该页面时,图片也会获取到,但是现在想来,或许是服务器只提供这个html的文件,交由客户端的浏览器编译,但是在客户端里并不存在该图片文件,所以图片自然无法获取到。在看其他页面的源代码后,发现,他们的图片路径都是通过访问网络资源得到的,所以说,图片也应属于网络资源,而不是这样:

代码便不是如下所示:


<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/NAROTA.jpg"/> </body> </html>

那么怎么设置网络资源呢,比如一张png格式的图片,我们需要知道,网络资源首先放在我们的服务器,所以我们的node.js服务器中应该在客户端访问这张图片时读取这张图片,然后再返回给客户端,下面我们直接贴出代码,这个是我自己瞎捉摸的,我目前也不知道主流的做法是怎么样的,但是还是优化了一下url的解析:

Js中文网 – 全球前端挚爱的技术成长平台 www.javascriptC.com
Javascript中文网是以前端进阶资源教程分享为主的专业网站,包括:前端教程、JavaScript资讯、大厂面试题、typescript教程、程序人生、React.js源码解读、Vue3.js技术揭秘等,以帮助开发者成长为愿景的社区


var http=require("http"); var fs=require("fs"); var url=require("url"); //创建一个server的实例 var server=http.createServer(function(req,res){ var pathname=url.parse(req.url).pathname; //当url的ip加端口号的后1到7位为img/png时,返回以该路径下对应的png图片 if(pathname.substring(1,8)==='img/png'){ fs.readFile(pathname.substring(1),function(err,data){ res.writeHead(200,{'Content-Type':'image/png'}); res.end(data); }); } //jpg同上 if(pathname.substring(1,8)==='img/jpg'){ fs.readFile(pathname.substring(1),function(err,data){ res.writeHead(200,{'Content-Type':'image/jpeg'}); res.end(data); }); } }).listen(3010);//监听在3010端口 console.log('服务器已开启......');

www.baidu.com

主要是如何解析url,比如我要访问127.0.0.1:3010这个ip加端口的服务器,其目录下的img/png的warn.png这张图片,在上述代码中,我就只需访问127.0.0.1:3010/img/png/warn.png ,效果如下:

NODE.JS根据URL返回指定的图片

具体思路是,将url中的img/png/xxx.png解析出来作为我们读取图片的参数,这样做得好处是只需一条判断语句即可处理所有的png类型的图片。 在node.js中,可以通过writeHead() 方法写头,表明该文件的类型,可以将大部分的文件类型设置为网络资源。

下面是一些常用的HTTP Content-Type,希望对大家能有帮助:

``NODE.JS根据URL返回指定的图片

作者:Chamberlain99
链接:https://juejin.im/post/6884926541101596679

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:NODE.JS根据URL返回指定的图片

链接:https://www.javascriptc.com/4699.html

« LeetCode 087. 扰乱字符串
GitHub上最励志的计算机自学教程(重制版)»
Flutter 中文教程资源

相关推荐

QR code