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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
详解node中创建服务进程
May 09 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
js实现点赞效果
Mar 16 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 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
PHP安全技术之 实现php基本安全
2010/09/04 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python如何测试stdout输出
2020/08/10 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
岗位明星事迹材料
2014/05/18 职场文书
团组织推优材料
2014/12/29 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
sql注入报错之注入原理实例解析
2022/06/10 MySQL
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS