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 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
Vue动态面包屑功能的实现方法
Jul 01 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 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
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
Bootstrap精简教程
2015/11/27 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
廉政教育心得体会
2014/01/01 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
悬空寺导游词
2015/02/05 职场文书
公司保洁员管理制度
2015/08/04 职场文书