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

先准备一张图片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. node学习（2）-路由读取图片

    通常我们开发项目的时候都要用到图片,那么nodejs是如何读取图片的呢? 我们来看一下,因为一个网页中图片的数量是不确定的,而我们不能每一张图片都去写它的src路径,这时候最好的方法就是写一个专门读取 ...

  2. java IO流读取图片供前台显示

    最近项目中需要用到IO流来读取图片以提供前台页面展示,由于以前一直是用url路径的方式进行图片展示,一听说要项目要用IO流读取图片感觉好复杂一样,但任务下达下来了,做为程序员只有选择去执行喽,于是找了 ...

  3. nodeJS基础08：读取图片

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

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

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

  5. NodeJS学习笔记 进阶 (5)将图片转成datauri嵌入到html(ok)

    个人总结:这篇文章讲解了使用Node处理转换base64编码图片,读完这篇文章需要5分钟. 摘选自网络 问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成b ...

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

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

  7. [Xcode 实际操作]九、实用进阶-(12)从系统相册中读取图片

    目录:[Swift]Xcode实际操作 本文将演示从系统相册中读取图片. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //添加两个协议 ...

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

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

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

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

随机推荐

  1. QT学习笔记3

    对话框 新建了一个对话框,在新建项目选择类型时是Dialog即可. 添加的代码如下,注意QCheckBox 并没有添加头文件定义,只是加了类的前向声明.因为我们仅仅使用的是指针,并不涉及到这些类的函数 ...

  2. JNative library not loaded, sorry ! win7 64位系统

    java调用动态链接库时,使用myeclipse或者其他IDE工具时,针对于web程序,会报这样的错误: java.lang.IllegalStateException: JNative librar ...

  3. Java事务处理全解析（六）—— 使用动态代理（Dynamic Proxy）完成事务

    在本系列的上一篇文章中,我们讲到了使用Template模式进行事务管理,这固然是一种很好的方法,但是不那么完美的地方在于我们依然需要在service层中编写和事务处理相关的代码,即我们需要在servi ...

  4. Struts1、Struts2和SpringMVC剖析【转载】

    前段框架用了不少,今天就来做个总结.网上关于Struts1.Struts2.SpringMVC的文章有很多,这里的内容就是基于它们,来做个比较. 这三个框架是按照上面的顺序,依次出现的,它们都是对MV ...

  5. UCML快速开发平台学习1-UCML环境安装

           最近公司项目时间紧张,经过各位大神的PK,决定用多年前话10W采购过来,一直被雪藏的UCML来开发.为啥花了钱买回来不用我就不吐槽了. UCML安装         翻看安装手册,貌似不 ...

  6. Android studio导入第三方类库

    1.开发过程中想要导入第三方类库和Eclipse也是有差别的,我们导入SlidingMenu这个类库,从github上下载下来解压到项目目录下. 2.然后我们重启我们的android studio就会 ...

  7. 更深入一点理解switch语句及c/c++对const的处理

    首先看一到用 c 编写的程序/* -------------------- filename : ta.c --------------- */int switch_test_first( int x ...

  8. JS基础知识：Javascript事件触发列表

    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...

  9. webpack4与babel配合使es6代码可运行于低版本浏览器

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...

  10. Delphi 三层TDataSetProvider

    在Delphi想使用三层架构或者使用TClientDataSet控件,一般都需要引用TDataSetProvider控件,现对TDataSetProvider控件的Options属性值做一个简单的分析 ...