新手求教，关于Nodejs加载图片。

新手求教，关于Nodejs加载图片。

nodejs，如果不用express框架， 用代码fs.readFile(__dirname + ‘message.html’,‘utf-8’,function(err, data){加载html到客户端画面，message.html中样式表的背景图片（<body style=‘background:url(“img/body-background.jpg”)’>）怎么处理？ 谢谢各位大神。

4 回复

当然可以。针对您的问题，我们可以通过Node.js来加载图片，并将其展示在HTML页面中。我们将创建一个简单的HTTP服务器，使用fs模块读取HTML文件，并通过响应流将HTML内容发送到客户端。同时，我们也会确保背景图片能够正确地加载。

首先，我们需要创建一个基本的HTTP服务器。接下来，我们将读取HTML文件，并将其中引用的图片路径进行处理，使其能够被正确加载。

示例代码

const http = require('http');
const fs = require('fs');
const path = require('path');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    if (req.url === '/') {
        // 读取HTML文件
        fs.readFile(path.join(__dirname, 'message.html'), 'utf-8', (err, htmlData) => {
            if (err) {
                console.error(err);
                res.writeHead(500, { 'Content-Type': 'text/plain' });
                res.end('Internal Server Error');
                return;
            }

            // 将HTML内容发送到客户端
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(htmlData);
        });
    } else {
        // 处理其他请求
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 创建HTTP服务器：我们使用http.createServer()方法创建了一个HTTP服务器。当访问根目录/时，服务器会读取并返回message.html文件。

  2. 读取HTML文件：我们使用fs.readFile()方法异步读取message.html文件。如果文件存在且读取成功，我们将其内容作为字符串返回。

  3. 处理HTML内容：我们将读取到的HTML内容直接发送给客户端。假设HTML文件中的图片路径是相对路径，例如<body style='background:url("img/body-background.jpg")'></body>，那么这些图片应该与HTML文件位于同一目录下，或者需要确保服务器能够正确解析这些路径。

  4. 错误处理：如果读取文件失败或遇到其他错误，服务器将返回500状态码，并输出错误信息。

这样，当用户访问服务器时，他们将看到包含背景图片的HTML页面。确保图片文件（如body-background.jpg）存在于正确的路径中，以便客户端能够正确加载它。


http://www.infoq.com/cn/news/2011/11/tyq-nodejs-static-file-server

http://cnodejs.org/topic/5024fa62f767cc9a510f9a8b

对于你的问题，我们来一步步分析如何在Node.js中加载图片并将其显示在HTML页面上。这里的关键点是如何正确地读取文件并在浏览器中显示图片。

示例代码

首先，我们需要设置一个简单的HTTP服务器，用于发送静态文件（包括HTML和图片）。这里我们使用Node.js内置的http模块。

const http = require('http');
const fs = require('fs');
const path = require('path');

// 创建服务器
const server = http.createServer((req, res) => {
    let filePath = '.' + req.url;
    if (filePath == './') {
        filePath = './index.html';
    }

    // 检查文件是否存在
    const extname = String(path.extname(filePath)).toLowerCase();
    const mimeTypes = {
        '.html': 'text/html',
        '.jpg': 'image/jpeg',
        '.png': 'image/png',
        '.css': 'text/css',
        '.js': 'application/javascript'
    };

    const contentType = mimeTypes[extname] || 'application/octet-stream';

    fs.readFile(filePath, (err, content) => {
        if (err) {
            if (err.code === 'ENOENT') {
                fs.readFile('./404.html', (err, content) => {
                    res.writeHead(200, { 'Content-Type': contentType });
                    res.end(content, 'utf-8');
                });
            } else {
                res.writeHead(500);
                res.end(`Server Error: ${err.code}`);
            }
        } else {
            res.writeHead(200, { 'Content-Type': contentType });
            res.end(content);
        }
    });
});

server.listen(3000, () => console.log('Server running on port 3000'));

HTML 文件示例 (index.html)

确保HTML文件中的图片路径是正确的，并且与服务器根目录相对应。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
</head>
<body style="background: url('/img/body-background.jpg');">
    <h1>Welcome to the Sample Page!</h1>
</body>
</html>

图片文件放置

确保将body-background.jpg放在/img/目录下，即项目根目录下的img文件夹。

这样设置后，当你访问http://localhost:3000/时，服务器会根据请求返回相应的文件内容，并且背景图片也会正常显示。

回到顶部