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 相关文章推荐
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
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
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
小程序转发探索示例
2019/02/19 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python使用cPickle模块序列化实例
2014/09/25 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
python开发入门——列表生成式
2020/09/03 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
简历的自荐信
2013/12/19 职场文书
贷款委托书范本
2014/04/08 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书