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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
vue小白入门教程
Apr 02 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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 绘制网站登录首页图片验证码
2016/04/12 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
二级域名转向类
2006/11/09 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
在python中的socket模块使用代理实例
2014/05/29 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python调用win32接口进行截图的示例
2020/11/11 Python
python drf各类组件的用法和作用
2021/01/12 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
会计毕业生自荐信
2013/11/21 职场文书
网站创业计划书
2014/04/30 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
医院志愿者活动总结
2015/05/06 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
golang中的空接口使用详解
2021/03/30 Python
goland 清除所有的默认设置操作
2021/04/28 Golang
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技