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 插件学习(四)
Aug 06 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
浅析javascript函数表达式
Feb 10 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
微信小程序实现留言板
Oct 31 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 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
我的论坛源代码(七)
2006/10/09 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python生成器generator用法示例
2018/08/10 Python
python 获取url中的参数列表实例
2018/12/18 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python tkinter组件使用详解
2019/09/16 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
一套带网友答案的.NET笔试题
2016/12/06 面试题
文员岗位职责
2013/11/09 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2014年司法局工作总结
2014/12/11 职场文书
个人简历求职信范文
2015/03/20 职场文书
学习雷锋主题班会
2015/08/14 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Springboot中如何自动转JSON输出
2022/06/16 Java/Android