html与node.js结合添加图片

html-css09

html与node.js结合添加图片,第1张

想要使用JavaScript添加图片,可以先使用createElement()方法创建一个img元素,并向img元素的src属性赋图片的URL地址值;然后使用appendChild()方法将img元素添加到指定dom对象中,即可。

createElement() 方法

createElement() 方法通过指定名称创建一个元素

语法:document.createElement(nodename)

参数:nodename:必须。创建元素的名称。

返回值:创建的元素节点

getElementById() 方法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

如果没有指定 ID 的元素返回 null

如果存在多个指定ID的元素则返回 undefined。

语法:document.getElementById(elementID)

appendChild() 方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

提示:如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

简单的说,能。

你没说清楚你要做什么,通常nodejs本身是用来构建web服务给其他客户端包括浏览器提供html的,浏览器取得html后渲染出来就是我们看到的页面效果

所以如果你像用nodejs访问磁盘上的html文件,没问题,跟访问其他文件一样, 如果你想用nodejs做客户端访问web服务器,也可以,创建个请求发过去,响应的内容就是html文本,当然没有浏览器的渲染功能你只能看看文本

原因很简单,在你的代码中

fs.readFile("/login.html",function(err,html) 这句话导致你无法读取图片。

这句话表达的含义是: 我只读取 login.html 这个文件的内容,其他文件内容我都不读取

但是你要知道login.html文件中的每个图片都是外部资源,它们不属于html的内容

比如:假设login.html中有这样一段

<img src="/image/cat.png" />

因为上面的那段代码,现在 /image/cat.png 这个路径里的图片内容你无法读取

解决办法:

先引入 http、fs、url模块(这里省略)

var server = http.createServer( function( req , res ) { //创建服务器

var filename = url.parse( request.url ).pathname //获取文件路径

fs.readFile( filename , function( err , html ) { //读取html文件以及图片

................. // 这里直接使用filename可能会出错

}) // 如果你的图片不在目录文件夹中

}).listen(8000)// 需这样写: '../'+filename

filename是一个变量,html路径以及图片路径会先后赋值给它 , 这样就保证了我们先后读取了html文件内容和图片内容

在html中 src=”/image/cat.png“ ,这里src指向的是外部资源,我们进入了一个误区:

我们以为图片也属于html的内容。其实不然,一个页面中的所有图片都不属于该页面的内容

它们是外部资源,所以我们读取一个html时,需要单独的去读取里面的图片