nodejs进阶(4)—读取图片到页面
我们先实现从指定路径读取图片然后输出到页面的功能。
先准备一张图片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)—读取图片到页面的更多相关文章
- node学习（2）-路由读取图片
通常我们开发项目的时候都要用到图片,那么nodejs是如何读取图片的呢? 我们来看一下,因为一个网页中图片的数量是不确定的,而我们不能每一张图片都去写它的src路径,这时候最好的方法就是写一个专门读取 ...
- java IO流读取图片供前台显示
最近项目中需要用到IO流来读取图片以提供前台页面展示,由于以前一直是用url路径的方式进行图片展示,一听说要项目要用IO流读取图片感觉好复杂一样,但任务下达下来了,做为程序员只有选择去执行喽,于是找了 ...
- nodeJS基础08：读取图片
1.读取图片 //server.js var http = require("http"); var readImage = require("./readImage&q ...
- Nodejs进阶：如何将图片转成datauri嵌入到网页中去
问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:"nodejs读取图片,转成base64,怎么读取呢?" 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即 ...
- NodeJS学习笔记 进阶 (5)将图片转成datauri嵌入到html(ok)
个人总结:这篇文章讲解了使用Node处理转换base64编码图片,读完这篇文章需要5分钟. 摘选自网络 问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成b ...
- Servlet从本地文件中读取图片，并显示在页面中
import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...
- [Xcode 实际操作]九、实用进阶-(12)从系统相册中读取图片
目录:[Swift]Xcode实际操作 本文将演示从系统相册中读取图片. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //添加两个协议 ...
- nodejs进阶(3)—路由处理
1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...
- nodejs进阶(5)—接收请求参数
1. get请求参数接收 我们简单举一个需要接收参数的例子 如果有个查找功能,查找关键词需要从url里接收,http://localhost:8000/search?keyword=地球.通过前面的进 ...
随机推荐
- 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...
- [APUE]文件和目录(下)
一.mkdir和rmdir函数 #include <sys/types.h> #include <sys/stat.h> int mkdir(const char *pathn ...
- jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...
- 开源一个跨平台运行的服务插件 - TaskCore.MainForm
本次将要很大家分享的是一个跨平台运行的服务插件 - TaskCore.MainForm,此框架是使用.netcore来写的,现在netcore已经支持很多系统平台运行了,所以将以前的Task.Main ...
- [C#] C# 知识回顾 - 异常介绍
异常介绍 我们平时在写程序时,无意中(或技术不够),而导致程序运行时出现意外(或异常),对于这个问题, C# 有专门的异常处理程序. 异常处理所涉及到的关键字有 try.catch 和 finally ...
- Linux上如何查看物理CPU个数，核数，线程数
首先,看看什么是超线程概念 超线程技术就是利用特殊的硬件指令,把两个逻辑内核模拟成两个物理芯片,让单个处理器都能使用线程级并行计算,进而兼容多线程操作系统和软件,减少了CPU的闲置时间,提高的CPU的 ...
- ASP.NET Core CORS 简单使用
CORS 全称"跨域资源共享"(Cross-origin resource sharing). 跨域就是不同域之间进行数据访问,比如 a.sample.com 访问 b.sampl ...
- [转]Patch文件结构详解
N久不来 于是不知道扔在哪儿于是放这里先 如果你觉得碍事的话 帮我扔到合适的版块去.. 导读这是一篇说明文 它介绍了标准冒险岛更新文件(*.patch;*.exe)的格式文章的最后附了一段C#的参考代 ...
- Kooboo CMS技术文档之三：切换数据存储方式
切换数据存储方式包括以下几种: 将文本内容存储在SqlServer.MySQL.MongoDB等数据库中 将站点配置信息存储在数据库中 将后台用户信息存储在数据库中 将会员信息存储在数据库中 将图片. ...
- css_02之盒模型、渐变
1.框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width:②对象实际高度=上下外边距+上下边框+上下内边距 + height: 2.外边距:margin:取值:①top(上 ...