node.js如何根据URL返回指定的图片详解


Posted in Javascript onOctober 21, 2020

学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的解析:

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('服务器已开启......');

主要是如何解析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返回指定的图片详解

总结

到此这篇关于node.js如何根据URL返回指定图片的文章就介绍到这了,更多相关node.js根据URL返回图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
vue中template的三种写法示例
Oct 21 #Javascript
Vue使用v-viewer实现图片预览
Oct 21 #Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 #Javascript
Vue+axios封装请求实现前后端分离
Oct 23 #Javascript
构建一个JavaScript插件系统
Oct 20 #Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 #Javascript
原生js实现俄罗斯方块
Oct 20 #Javascript
You might like
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php统计文章排行示例
2014/03/04 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
在Python中定义一个常量的方法
2018/11/10 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
基于python检查矩阵计算结果
2020/05/21 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
行政前台岗位职责
2013/12/04 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
法院个人总结
2015/03/03 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis