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

先准备一张图片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方法(在本文的第一段代码里)

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

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

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

nodejs进阶(4)—读取图片到页面的更多相关文章

  1. nodeJS基础08:读取图片

    1.读取图片 //server.js var http = require("http"); var readImage = require("./readImage&q ...

  2. Nodejs进阶:如何将图片转成datauri嵌入到网页中去

    问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:"nodejs读取图片,转成base64,怎么读取呢?" 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即 ...

  3. Servlet从本地文件中读取图片,并显示在页面中

    import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...

  4. nodejs进阶(3)—路由处理

    1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...

  5. nodejs进阶(5)—接收请求参数

    1. get请求参数接收 我们简单举一个需要接收参数的例子 如果有个查找功能,查找关键词需要从url里接收,http://localhost:8000/search?keyword=地球.通过前面的进 ...

  6. HTML中上传与读取图片或文件(input file)----在路上(25)

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  7. nodejs进阶(1)—输出hello world

    下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var  http  =  require ...

  8. img src某个php文件输出图片(回复更改图片readfile读取图片等)

    在论坛我们经常看到一回复图片就更改等,这功能是怎么实现的呢,其实更验证码道理相同. 新建文件 randimage.php 加入以下代码: <?php $dir='../../images/'; ...

  9. nodejs进阶(6)—连接MySQL数据库

    1. 建库连库 连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端 建一个数据库mydb1 mysql> CREATE DATABA ...

随机推荐

  1. 萌新笔记——C++里创建 Trie字典树(中文词典)(一)(插入、遍历)

    萌新做词典第一篇,做得不好,还请指正,谢谢大佬! 写了一个词典,用到了Trie字典树. 写这个词典的目的,一个是为了压缩一些数据,另一个是为了尝试搜索提示,就像在谷歌搜索的时候,打出某个关键字,会提示 ...

  2. XSS漏洞

    跨站脚本攻击(也称为XSS)指利用网站漏洞从用户那里恶意盗取信息 坚决不要相信任何用户输入并过滤所有特殊字符.这样既可消灭绝大部分的XSS攻击.另一个建议是输出页面时将 < 和 > 变换成 ...

  3. MySQL 配置

    MySQL 配置 1.服务启动: (1)使用 service 启动:service mysqld start (2)使用 mysqld 脚本启动:/etc/inint.d/mysqld start ( ...

  4. 后台给前台传JSON字符串,前台解析并拼接显示

    后台传JSON public class CourseType : IHttpHandler { Epoint.PeiXun.Bizlogic.BLL.CourseLibrary.PX_CourseT ...

  5. SQL Server如何添加登录名

    1.电脑上如果安装有SQL Server,我们在开始里面打开SQL Server Management Studio,或者以桌面的快捷方式等打开SQL Server. 2.首先以Windows身份验证 ...

  6. Eclipse 反编译插件安装jad

    Eclipse的反编译插件一直在用jad,感觉很不错. 刚下了个新版的eclipse,配置jad的时候发现要多设置个东西. 从头开始 环境介绍: eclipse version:Kepler Rele ...

  7. rsync 配置

    1.安装rsync和配置文件 root@localhost ~]# yum -y install rsync #安装rsync服务 #CentOS 默认以 xinetd 方式运行 rsync 服务.r ...

  8. js实现点击&lt;li&gt;标签弹出其索引值

    据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...

  9. s表达式和json表达式

    s表达式 + 1 2 3普通表达式 1+2+3json表达式{ +:[1, 2, 3]}优点,一个运算符,无限个参数 s表达式 * (+ 1 2) 3普通表达式 1+(2*3)json表达式{ *:[ ...

  10. c#操作Zip压缩文件

    SharpZipLib 文件/文件夹压缩 一.ZipFile ZipFile类用于选择文件或文件夹进行压缩生成压缩包. 常用属性: 属性 说明 Count 文件数目(注意是在ComitUpdat之后才 ...