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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
js 判断数据类型的几种方法
2017/01/13 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python导入oracle数据的方法
2015/07/10 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技