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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
Html5生成验证码的示例代码
May 10 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 第二节 数据类型之数组
2012/04/28 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php算法实例分享
2015/07/14 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python实现无证书加密解密实例
2014/10/27 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
详解Django中Request对象的相关用法
2015/07/17 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
python3实现磁盘空间监控
2018/06/21 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Python如何输出百分比
2020/07/31 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
摄影展策划方案
2014/06/02 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
运动会加油稿30字
2015/07/21 职场文书
php 原生分页
2021/04/01 PHP
MySQL 慢查询日志深入理解
2021/04/22 MySQL