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 相关文章推荐
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue实现简单加法计算器
Oct 22 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
cypress测试本地web应用
Jun 01 Javascript
Vue深入理解插槽slot的使用
Aug 05 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python中join和split用法实例
2015/04/14 Python
Django中处理出错页面的方法
2015/07/15 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
python openCV自制绘画板
2020/10/27 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
夫妻吵架保证书
2015/05/08 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
新闻报道稿范文
2015/07/23 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python