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实现页面打印的三种方法
Mar 05 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
JS array数组检测方式解析
May 19 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时区转换转换函数
2014/01/07 PHP
ThinkPHP之getField详解
2014/06/20 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
师范生实习的个人自我鉴定
2013/10/20 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
出生公证书样本
2014/04/04 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
医生行业员工的辞职信
2019/06/24 职场文书