node.js读取HTML并显示文件中的图片

谁践踏了优雅 2021-07-25 14:17 743阅读 0赞

## node.js读取HTML并显示文件中的图片 ##

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style> div { width: 400px; height: 400px; border: 1px solid #eee; /* background-color: gold; */ background-image: url('./4.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } </style>
    </head>
    
    <body>
      <div></div>
    </body>
    
    </html>

index.js

var http = require('http');
    var server = http.createServer();
    var fs = require('fs');
    server.on('request', function (req, res) { 
      res.setHeader('Content-Type', 'text/html;charset=utf-8');
    
      var url = req.url;
      if (url == '/') { 
        fs.readFile('index.html', function (erro, data) { 
          res.end(data);
        })
      } else { 
        // 获取到图片的url
        fs.readFile('.' + url, function (err, data) { 
          res.end(data);
          console.log(url);
        })
      }
      console.log(req.socket.remoteAddress, req.socket.remotePort);
    })
    
    server.listen(3333, function () { 
      console.log("服务器启动！请使用浏览器打开127.0.0.1:3333");
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/7f78f1214bc640b08b961fbf733af1e8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，743人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular读取文件内容并显示

一、读取文件内容 html <input type="file" accept=".csv,.txt" (change)="openFile($event)">

刺骨的言语ヽ痛彻心扉/ 2023年05月30日 10:46/ 0 赞/ 200 阅读

相关 electron 从剪贴板读取图片并显示

以下示例代码基于vue 首先，我们在data中定义几个变量 data() { return { showclipboa

柔光的暖阳◎/ 2023年01月07日 14:25/ 0 赞/ 486 阅读

相关 nodejs图片读取

response返回都是html/text，向前台输出一张图片用的image/jpeg,服务器读取图片的时候是按照binary的二进制方式读取，给客户端返回的时候也按照bina

ゝ一世哀愁。/ 2022年09月09日 02:09/ 0 赞/ 331 阅读

相关 nodejs文件的读取

读取： read.js //导入http var http = require('http'); var optfile = require('..

落日映苍穹つ/ 2022年09月09日 00:24/ 0 赞/ 271 阅读

相关【OPENGL】读取并显示BMP文件

代码如下： include <gl/glut.h> define FileName "D:\\grab.bmp" static GLint Image

痛定思痛。/ 2022年06月07日 08:46/ 0 赞/ 451 阅读

相关 Qt--打开文件对话框读取图片并显示读取路径

1、准备工作：首先，在ui界面文件上添加如下控件：两个label、一个LineEdit、一个pushButton ![在这里插入图片描述][watermark_type

清疚/ 2022年01月29日 05:15/ 0 赞/ 1356 阅读

相关 Html读取本地文件夹下图片并显示的示例代码

一目的在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有图片并显示在页面。技术分析：存在问题 Html中file标签获取到的路径时相对的。

Myth丶恋晨/ 2021年11月15日 13:50/ 0 赞/ 788 阅读

相关读取并显示mysql中的BLOB图片

项目需要将存入mysql数据库中的图片显示出来，Controller中方法如下： @RequestMapping(value="/showPicture.do",me

r囧r小猫/ 2021年10月13日 00:39/ 0 赞/ 529 阅读

相关库房--js读取本地图片并显示

转载文章地址：[http://blog.csdn.net/qiulei\_21/article/details/52785191][http_blog.csdn.net_qiu

阳光穿透心脏的1/2处/ 2021年09月26日 22:50/ 0 赞/ 595 阅读

相关 node.js读取HTML并显示文件中的图片

node.js读取HTML并显示文件中的图片 index.html <!DOCTYPE html> <html lang="en">

谁践踏了优雅/ 2021年07月25日 14:17/ 0 赞/ 744 阅读