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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
Vue如何实现组件间通信
May 15 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
如何开始收听短波广播
2021/03/01 无线电
PHP测试程序运行时间的类
2012/02/05 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php构造函数实例讲解
2013/11/13 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python中私有函数调用方法解密
2016/04/29 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
一套SQL笔试题
2016/08/14 面试题
自我评价怎么写正确呢?
2013/12/02 职场文书
技能比赛获奖感言
2014/02/14 职场文书
酒店员工检讨书
2014/02/18 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
导游词之青城山景区
2019/09/27 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
Java设计模式中的命令模式
2022/04/28 Java/Android