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

news2024/11/24 10:35:06

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

先准备一张图片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进阶为一系列教程,可以单独阅读,之间有一定的关联性,最好能系统的进行学习。)

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

思维中的世界

⾝体的空间&#xff0c;以⾏为为导向的空间 感官⼩矮⼈ 当我们观察特定的事物时&#xff0c;⼤脑的相应区域就会被“点亮”&#xff0c;并变得 活跃起来。 ⾝体映射到⼤脑上&#xff0c;映射到“感官⼩矮⼈”上&#xff0c; 即从左⽿延伸&#xff0c;过⼤脑顶⾻&#xff0c;…

OpenCV 实战七 setMouseCallback 鼠标交互画框

鼠标交互画框效果&#xff1a; 目录 1、setMouseCallback()函数 2、on_Mouse函数 3、代码 1、setMouseCallback()函数 函数原型 void setMouseCallback(const String& winname, MouseCallback onMouse, void* userdata 0); 参数说明 winname 窗口名称 onMouse 鼠标…

全网最火爆,性能测试-测试用例与测试方法总结(超详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能测试用例 无…

视频截取动图怎么做?分享在线视频转gif小窍门

如何将一段视频制作成gif动图表情包呢&#xff1f;Gif表情包常见的制作方法就是将电影、电视剧中的某个画面截取出来做成gif表情包。那么&#xff0c;如何从视频中截取GIF呢&#xff1f; 一、怎样才能完成视频转gif制作&#xff1f; 通过使用GIF中文网的视频转gif&#xff08…

C语言算法--冒泡排序

C语言算法–冒泡排序 1-什么是冒泡排序 冒泡排序是一种简单的排序算法&#xff0c;它通过比较相邻元素的大小&#xff0c;并根据需要交换它们的位置来排序数据。它的名称来自于越小的元素会慢慢“冒泡”到数组的开头。 冒泡排序的基本思想是从数组的第一个元素开始&#xff…

【黑马笔记】web app项目初始化

文章目录 0. 工程介绍1. 使用模版初始化1.1 选择模版1.2 补充文件 2. 使用空项目初始化2.1 新建maven项目&#xff0c;直接新建2.2 补充文件2.2.1 补充packaging形式&#xff1a;war2.2.2 借助Facets自动补齐 0. 工程介绍 打包方式 新建maven项目&#xff0c;使用<packing&…

数据结构总结1:了解数据结构、时间复杂度、空间复杂度

后续可能会有补充和更改 目录 一、数据结构 1.算法介绍 二、时间复杂度、空间复杂度 三、练习 1.时间复杂度 2.空间复杂度 一、数据结构 数据结构是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素的集合。 数据结构和数据库的区…

Jmeter测试POST请求

Jmeter测试POST请求 1、添加http请求 线程组->取样器->http请求 参数说明&#xff1a; 协议&#xff1a;http 服务器&#xff1a;10.1.1.26&#xff08;也就是ip地址&#xff09; 端口&#xff1a;8081 方法&#xff1a;POST 路径&#xff1a;例如&#xff…

滴滴 Java 一面面经

目录 1.了解Java集合嘛&#xff0c;详细说一下Map&#xff1f;2.为什么HashTable线程安全却不常用&#xff1f;3.HashMap不是线程安全&#xff0c;多线程下会出现什么问题&#xff1f;4.什么办法能解决HashMap线程不安全的问题呢5.ConcurrentHashmap是怎么实现的&#xff1f;6.…

ALOHA 开源机械臂(Viper 300 Widow X 250 6DOF机械臂 操作系统)第三部分

详情链接&#xff1a;https://tonyzhaozh.github.io/aloha/ Learning Fine-Grained Bimanual Manipulation with Low-Cost Hardware 用低成本硬件学习细粒度双手操作 Tony Zhao Vikash Kumar Sergey Levine Chelsea Finn Stanford University UC Berkeley Meta 斯坦福大学…

分布式锁解决方案_Zookeeper分布式锁原理

通过召zk实现分布式锁可靠性时最高的 公平锁和可重入锁的原理 取水秩序&#xff1a; &#xff08;1&#xff09;取水之前&#xff0c;先取号&#xff1b; &#xff08;2&#xff09;号排在前面的&#xff0c;就可以先取水&#xff1b; &#xff08;3&#xff09;先到的排在…

Go语言的学习【1】基础语法之前的准备事项

目录 什么是云原生学习方法go语言的IDE配置之VScode写go代码要注意的事情一些基本命令基础语法Go 语言原生自带测试Go vetPrint-format 错误&#xff0c;检查类型不匹配的printBoolean 错误&#xff0c;检查一直为 true、false 或者冗余的表达式Range 循环&#xff0c;比如如下…

ThingsBoard部署tb-gateway并配置OPCUA

1、安装 我实在自己的虚拟机上安装,使用官方Docker的安装方式 docker run -it -v ~/.tb-gateway/logs:/thingsboard_gateway/logs -v ~/.tb-gateway/extensions:/thingsboard_gateway/extensions -v ~/.tb-gateway/config:/thingsboard_gateway/config --name tb-gateway --…

《安富莱嵌入式周报》第312期:开源磁场照相机,仿生神经元PCB,开源无线耳机,手机系统PalmOS移植到各种单片机,开放系统组装协议OSAP

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 更新一期视频教程&#xff1a; BSP视频教程第26期&#xff1a;CAN/CANFD/CANopen专题&#xff0c;CANFD整个运行机制精…

PyTorch RNN的原理及其手写复现。

PyTorch RNN的原理及其手写复现。 记忆单元(考虑过去的信息)分类包括&#xff1a;1.RNN 2.GRU 3.LSTM模型类别&#xff1a;1.单向循环(左到右) 2.双向循环&#xff08;考虑未来信息&#xff09; 3.多层单向或双向循环优缺点应用场景具体公式 代码实现 记忆单元(考虑过去的信息)…

网络安全合规-数据安全评估

目前&#xff0c;我国在数据管理领域&#xff0c;已经正式出台的国家标准有《数据管理能力成熟度评估模型&#xff08;GB/T 36073-2018&#xff09;》&#xff08;DCMM&#xff09;&#xff0c;在数据安全检测评估、认证领域的标准有《数据安全能力成熟度模型&#xff08;GB/T …

实现取关和关注功能

将关注过的用户id存如数据库中 //关注或者取关 Override public Result follow(Long id, Boolean flag) { //1.获取当前登录用户的id UserDTO user UserHolder.getUser(); if(usernull){ return Result.fail("请先登录"); } Long userId user.getId(); //2.判断是关…

vue3+antDesignVue前端纯导出

效果 <a-buttonsize"default"style"margin-left: 10px"click"exportData">导出</a-button>1.下载所需依赖 npm install xlsx --save npm install file-saver --save<script setup> import { reactive, ref } from "vue…

SpringBoot——多环境开发

简单介绍&#xff1a; 在我们的开发过程中&#xff0c;我们的程序开发分为几个基本的阶段&#xff0c;比如开发阶段&#xff0c;调试阶段&#xff0c;运行阶段&#xff0c;在不同的阶段可能需要有不同的配置文件去对我们的项目做配置&#xff0c;那么要如何在不同的环境中配置…

C语言:数组定义方式

一、数组简介 <1>前言 大家首先来思考一个问题&#xff0c;若是我们想要定义两个变量&#xff0c;求这两个数的平均数&#xff0c;该怎么求呢&#xff1f; 例如&#xff1a;int a 10,b 20 int average (a b) / 2; 上面的公式&#xff0c;我相信大家应该很快就能够求出…