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 插件学习(三)
Aug 06 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
原生js轮播特效
May 18 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Vue组件库发布到npm详解
Feb 17 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
分享一个asp.net pager分页控件
2012/01/04 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue中轮训器的使用
2019/01/27 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
前端性能优化建议
2020/09/17 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
vue中是怎样监听数组变化的
2020/10/24 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
python算法学习之计数排序实例
2013/12/18 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
校园环保建议书
2014/05/14 职场文书
作风建设演讲稿
2014/05/23 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
学生检讨书怎么写
2014/10/09 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
自主招生自荐信格式
2015/03/04 职场文书
教师师德工作总结2015
2015/07/22 职场文书
解除合同协议书范本
2016/03/21 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python