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刷新框架子页面的七种方法代码
Nov 20 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python 常用string函数详解
2016/05/30 Python
Python如何判断数独是否合法
2016/09/08 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python求离散序列导数的示例
2019/07/10 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
春节联欢会主持词
2014/03/24 职场文书
中秋节主持词
2014/04/02 职场文书
项目投资合作意向书
2014/07/29 职场文书
技术经济专业求职信
2014/09/03 职场文书
毕业生个人总结
2015/02/28 职场文书
房租涨价通知
2015/04/23 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
JavaScript 数组去重详解
2021/09/15 Javascript
Win11 BitLocker 驱动器加密
2022/04/19 数码科技