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

先准备一张图片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. CC_STACKPROTECTOR防内核堆栈溢出补丁分析【转】

    转自:https://yq.aliyun.com/articles/1723 摘要: 作者:王智通   CC_STACKPROTECT补丁是Tejun Heo在09年给主线kernel提交的一个用来防 ...

  2. SQL Server2008创建约束图解

    机房收费系统个人重构版开始了,但在设计数据库时遇到了写小麻烦,主要是数据库中约束的应用,以前在学习数据库时进行了总结,在刚开始学习时使用的是SQL Server2000 小操作了下,查证了几种约束的作 ...

  3. paip java.net.SocketException No buffer space available的解决办法及总结

    java.net.SocketException No buffer space available的解决办法及总结 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来 ...

  4. safe_mode(php安全模式)

    简单说,PHP安全模式就是以安全模式运行php. php的安全模式提供一个基本安全的共享环境,在一个有多个用户帐户存在的php开放的web服务器上.当一个web服务器上运行的php打开了安全模式,那么 ...

  5. Flex 布局教程

    今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...

  6. Qt编写自定义控件6-指南针仪表盘

    前言 指南针仪表盘,主要用来指示东南西北四个方位,双向对称两个指针旋转,其实就是360度打转,功能属于简单型,可能指针的绘制稍微难一点,需要计算多个点构成多边形,本系列控件文章将会连续发100+篇,一 ...

  7. ios 11越狱移除

    https://baijiahao.baidu.com/s?id=1593748369421662278&wfr=spider&for=pc 不越狱抹机步骤: 点击设置  进入自带游览 ...

  8. Java并发编程笔记之CopyOnWriteArrayList源码分析

    并发包中并发List只有CopyOnWriteArrayList这一个,CopyOnWriteArrayList是一个线程安全的ArrayList,对其进行修改操作和元素迭代操作都是在底层创建一个拷贝 ...

  9. uva10780

    将m分解质因数,然后计算次数取最小. #include <iostream> #include <cstdio> #include <cmath> #include ...

  10. Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决

    Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决 链接时遇到的问题,记录一下 如果还没有安装工具,请参考:Navicat P ...