nodejs进阶(4)—读取图片到页面

我们先实现从指定路径读取图片然后输出到页面的功能。

先准备一张图片imgs/dog.jpg。

file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'。(file.js 在上一篇文章nodejs进阶3-路由处理中有完整的内容)

readImg:function(path,res){
         fs.readFile(path,'binary',function(err,  file)  {
             if  (err)  {
                 console.log(err);
                 return;
             }else{
                 console.log("输出文件");
                     //res.writeHead(200,  {'Content-Type':'image/jpeg'});
                     res.write(file,'binary');
                     res.end();
             }
         });
     }
服务器创建代码如下,注意在发送请求头时需要声明 {'Content-Type':'image/jpeg'}  
 var  http  =  require('http');  
 var  file  =  require('./models/file');  
 http.createServer(function  (request,  response)  {  
     //response.writeHead(200,  {'Content-Type':  'text/html;  charset=utf-8'});  
     response.writeHead(200,  {'Content-Type':'image/jpeg'});  
         if(request.url!=="/favicon.ico"){  //清除第2此访问  
         console.log('访问');  
         //response.write('hello,world');//不能向客户端输出任何字节  
         file.readImg('./imgs/dog.jpg',response);  
         //------------------------------------------------  
         console.log("继续执行");  
         //response.end('hell,世界');//end在方法中写过  
     }  
 }).listen(8000);  
 console.log('Server  running  at  http://127.0.0.1:8000/');
      运行后在浏览器里可以看到读取后的图片显示出来。

当然我们真正应用时并不会这样使用,下面我们在换一种方式调用图片,在html里发送请求图片的方法。

 <html>
 <head></head>
 <body>
 登录:
 <p>这是一个段落</p>
 <h1>样式1</h1>
 <img src="./showImg"></img>
 </body>
 <html>

 

我们用login.html继续测试,在里面加入一个img标签,src的值为"./showImg",这样浏览器会发送另外一个请求http://localhost:8000/showImg。

这样我们在router里面再加入一个方法showImg,在这个方法里面调用file文件里的readImg方法(在本文的第一段代码里)

 
  1. showImg:function(req,res){
            file.readImg('./imgs/dog.jpg',res);
    }
    
    

我们运行http://localhost:8000/login

(nodejs进阶为一系列教程,可以单独阅读,之间有一定的关联性,最好能系统的进行学习。)

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/21781.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

03)FastDFS配置nginx 服务,使用http方式访问图片

FastDFS是没有文件访问功能的,需要借助其他工具实现图片HTTP访问的。 没安装nginx时比如前端html网页想获取 FastDFS的一张图片显示,需要java写个controller,然后使用 FastDFS-java client客户端调用文件获取api,HttpServletResponre在返回图片流.给前端显示。 安装了nginx…

计算机图形学-GAMES101-9

前言 材质和光的相互作用很重要。VertexShader和FragmentShader。纹理贴图Texture mapping。 一、在三角形中插值 为什么要在三角形内部插值&#xff1f;虽然我们的操作很多是在三角形顶点上进行计算的&#xff0c;但是对于三角形内部我们也希望每个像素点能得到一个值&…

ChatGPT的兴起的时代,国内chatgpt产品大盘点

在人工智能技术的不断发展和应用下&#xff0c;自然语言处理技术成为了研究的热点之一。而其中最受关注的就是“聊天机器人”技术&#xff0c;而GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型则是目前最流行的聊天机器人生成模型之一。 随着 ChatGPT 技…

模板类与友元

目录 分类 一、非模板友元&#xff1a;友元函数不是模板函数&#xff0c;而是利用模板类参数生成的函数&#xff1b; 代码 分析 运行结果 二、约束模板友元&#xff1a;模板类实例化时&#xff0c;每个实例化的类对应一个友元函数&#xff1b;并且这个模板友元适用多种类模…

pg事务:事务ID

事务ID pg中每个事务都会分配事务ID&#xff0c;事务ID分为虚拟事务ID和持久化事务ID&#xff08;transactionID&#xff09;。pg的事务ID非常重要&#xff0c;是理解事务、数据可见性、事务ID回卷等等的重要知识点。 虚拟事务ID 只读事务不会分配事务ID&#xff0c;事务ID是…

Chrome Performance 页面性能分析

Chrome Performance 页面性能分析 背景介绍 性能优化是前端开发一个非常重要的组成部分&#xff0c;如何更好地进行网络传输&#xff0c;如何优化浏览器渲染过程&#xff0c;来定位项目中存在的问题。Chrome DevTools给我们提供了2种常用方式 Audits和Performance&#xff0c…

三分钟看懂JDK、JRE和JVM的区别和联系

节选自JavaGuide(Github 标星 134k star!「Java学习 + 面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识) JVM Java 虚拟机(JVM)是运行 Java 字节码的虚拟机。JVM 有针对不同系统的特定实现(Windows,Linux,macOS),目的是使用相同的字节码,它们都会给出相同…

【C++】21年精通C++之泛型编程和模板初阶知识

❤️前言 大家好&#xff01;今天和大家一起学习关于C泛型编程和模板初阶的相关知识。 正文 我们之前已经学习了C中非常重要的一个特性——函数重载&#xff0c;函数重载很好地提高了我们代码的可读性。但是对于适配多种参数的某种函数来说&#xff0c;我们如果使用函数重载就…

Maven安装和配置(详细版)

Maven安装和配置 Maven安装1、安装链接&#xff1a;2、配置环境变量&#xff1a; Maven配置1、修改Maven仓库下载镜像及修改仓库位置&#xff1a;2、在Idea上配置Maven&#xff1a; 测试Maven安装能否安装jar包 Maven安装 1、安装链接&#xff1a; Maven – Download Apache …

阿里云服务器 之 mqtt服务器搭建及使用

本文主要是对mqtt的学习使用&#xff0c;其中服务器是基于阿里云服务器的mqtt功能&#xff0c;客户端使用的是mqttx软件。 一、服务器部分搭建说明 1、如果是首次使用&#xff0c;则需要经过注册与认证的步骤。 2、找到"产品与服务"-->"物联网平台"&…

【MySQL】多表查询

上一篇介绍了外键约束,外键约束是用于连接两张数据表的,所以在此基础上就有了多表查询 之前的查询都是单表查询,这里我们会将多个数据表的数据结果返回在一张表上 文章目录 1.多表关系2.多表查询2.1 多表查询分类2.2 内连接2.3 外连接2.4 自连接2.5 联合查询2.6子查询 1.多表关…

微信小程序nodejs+vue+uniapp超市网上购物商城系统

超市购物系统用户端要求在系统的安卓手机上可以运行&#xff0c;主要实现了管理端&#xff1b;首页、个人中心、用户管理、商品分类管理、商品信息管理、商品入库管理、订单信息管理、订单配送管理、订单评价管理、退货申请管理、换货申请管理、系统管理&#xff0c;用户端&…

【大数据学习篇7】小试牛刀统计并且分析天猫数据

本项目基于搭建大数据环境&#xff0c;通过将数据存放在HDFS上&#xff0c;从HDFS中获取数据&#xff0c;然后根据实际需求通过Spark或Spark SQL对数据进行读取分析&#xff0c;将分析结果存储到HBase表中&#xff0c;最终通过 ECharts数据可视化工具基于Python Web平台实现数据…

docker-compose 实现Seata Server高可用部署 | Spring Cloud 51

一、前言 Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。 TC (Transaction Coordinator) - 事务协调者 维护全局和分支事…

看模型、做技术交底、做项目汇报,图新说数字化汇报平台引领交互式汇报新模式

现场汇报效果不好&#xff0c;导致丢了一个项目&#xff01; 项目汇报平淡无奇&#xff0c;方案屡次被毙&#xff01; 面对专家质疑&#xff0c;回答苍白无力&#xff01; 估计大家都有过这种经历和感受。 详细分析一下&#xff0c;基本上有以下几个方面的原因&#xff1a; …

虚幻or现实?堆区、栈区真实存在吗?是操作系统在骗你罢了...

文章目录 &#x1f490;专栏导读&#x1f490;文章导读&#x1f427;引例 &#x1f426;进程地址空间&#x1f426;虚拟地址与物理内存的联系&#x1f514;回答引例中的问题&#x1f513;写时拷贝 &#x1f426;虚拟地址存在的意义&#x1f513;malloc的本质 &#x1f490;专栏…

装饰者设计模式解读

问题引进 星巴克咖啡订单项目&#xff08;咖啡馆&#xff09;&#xff1a; 1) 咖啡种类/单品咖啡&#xff1a;Espresso(意大利浓咖啡)、ShortBlack、LongBlack(美式咖啡)、Decaf(无因咖啡) 2) 调料&#xff1a;Milk、Soy(豆浆)、Chocolate 3) 要求在扩展新的咖啡种类时&#x…

接口测试全流程扫盲,让我看看有哪些漏网之鱼

目录 扫盲内容&#xff1a; 1.什么是接口&#xff1f; 2.接口都有哪些类型&#xff1f; 3.接口的本质及其工作原理是什么&#xff1f; 4.什么是接口测试&#xff1f; 5.问什么要做接口测试&#xff1f; 6.怎样做接口测试&#xff1f; 7.接口测测试点是什么&#xff1f;…

一些云原生开源安全工具介绍

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/130789465 一、Kubernetes安全监测工具kube-bench kube-bench是一个用Golang开发的、由Aqua Security发布的自动化Kubernetes基准测试工具&#xff0c;它运行CIS Kubernetes基准中的测试项目。这些测试…

MySQL高级篇第一天

目录 一、索引 二、索引结构 三、索引分类 四、索引语法 五、索引设计原则 六、视图 七、存储过程与概述 八、触发器 九、总结 一、索引 &#xff08;一&#xff09;索引概述 索引是一种能够帮组Mysql高效的从磁盘上查询数据的一种数据结构&#xff0c;这些数据结构以某…