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

先准备一张图片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. 前端框架 EasyUI (2)页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  2. HashMap与TreeMap源码分析

    1. 引言     在红黑树--算法导论(15)中学习了红黑树的原理.本来打算自己来试着实现一下,然而在看了JDK(1.8.0)TreeMap的源码后恍然发现原来它就是利用红黑树实现的(很惭愧学了Ja ...

  3. Node-Webkit打包

    1.node-webkit是什么? NW.js is an app runtime based on Chromium and node.js. You can write native apps i ...

  4. 为.NET Core项目定义Item Template

    作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...

  5. JavaScript动画-磁性吸附

    ▓▓▓▓▓▓ 大致介绍 磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果,如果对模拟拖拽有疑问的同学请移步模拟拖拽. 源代码.效果:点这里 ▓▓▓▓▓▓ 范围限定(可视区) 先来看一个 ...

  6. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  7. jquery.Callbacks的实现

    前言 本人是一个热爱前端的菜鸟,一直喜欢学习js原生,对于jq这种js库,比较喜欢理解他的实现,虽然自己能力有限,水平很低,但是勉勉强强也算是能够懂一点吧,对于jq源码解读系列,博客园里有很多,推荐大 ...

  8. ActiveRecord模式整理

    DAO Data Access Object,数据访问对象 DAO是一个软件设计的指导原则,在核心J2EE模式中是这样介绍DAO模式的:为了建立一个健壮的J2EE应用,应该将所有对数据源的访问操作抽象 ...

  9. 【读书】PHP程序员要读的书目(不断完善中)

    本文地址 分享提纲: 1. PHP 2. Linux 3. Apache/Nginx 4. Mysql 5.设计模式/架构 6. 缓存并发 7. 其他语言 8. 代码基础 9. 大前端 10. 管理生 ...

  10. C# Entity Framework并发处理

    原网站:C# Entity Framework并发处理 在软件开发过程中,并发控制是确保及时纠正由并发操作导致的错误的一种机制.从 ADO.NET 到 LINQ to SQL 再到如今的 ADO.NE ...