在Node.js

时间:2016-11-16 23:17:03

标签: javascript html node.js image filetree

我正在构建我的第一个Node.js MVC应用程序(本机节点,不使用Express),并且无法通过相对于其路径显示我的html文件中的图像。

我会省去你的server.js和router.js代码,但这里是我的控制器代码,基本上是我加载我的观点:

var fs = require("fs");
var controller = require("controller"); 

var load_view = 'view_home';
var context = { foo : 'bar' };

controller.load_view(res, req, fs, load_view, context);

这会传递给......

var url         = require('url');
var Handlebars  = require('handlebars');

function load_view(res, req, fs, view, context, session){

    // Files to be loaded, in order
    var files = [
        'view/elements/head.html',
        'view/elements/header.html',
        'view/' + view +'.html',
        'view/elements/footer.html'
    ];      

    // Start read requests, each with a callback that has an extra
    // argument bound to it so it will be unshifted onto the callback's
    // parameter list
    for(var i=0; i<files.length; ++i) 
        fs.readFile(files[i], handler.bind(null, i));

    var count = 0;

    function handler(index, err, content) {

        // Make sure we don't send more than one response on error
        if(count < 0) return;
        if(err) {
            count = -1;
            console.log('Error for file: ' + files[index]);
            console.log(err);
            res.writeHead(500);
            return res.end();
        }

        // Reuse our `files` array by simply replacing filenames with
        // their respective content
        files[index] = content;


        // Check if we've read all the files and write them in order if
        // we are finished
        if(++count===files.length) {
            res.writeHead(200, { 'Content-Type': 'text/html' });
            for(var i = 0; i < files.length; ++i) {

                var source = files[i].toString('utf8');

                // Handlebars
                var template = Handlebars.compile(source);
                var html = template(context);   

                res.write(html); /* WRITE THE VIEW (FINALLY) */

            }
            res.end();
        }

    } // handler()

} // load()

最后,这是我在src属性中带有标记和相对路径的html:

<div class="help">

    <img src="../public/img/test.jpg" />

</div>

我的文件系统与上述内容如下:

我确定相对​​路径是正确的,但已经尝试了相对路径甚至是绝对路径的所有组合。仍然没有显示图像。

来自LAMP背景,访问文件树中的图像是微不足道的,但我意识到服务器的设置方式有很大不同(因为我是设置它的人)。

我通过创建一个单独的控制器来显式加载这些文件并使用URI访问该控制器,从而访问文件系统中的其他文件(如样式表)。但是这种方法对于不确定数量的图像是不切实际的。

我如何访问&amp;使用Node.js在文件系统中显示我的图像?

1 个答案:

答案 0 :(得分:2)

  

我通过创建一个单独的控制器来显式加载这些文件并使用URI访问该控制器,从而访问文件系统中的其他文件(如样式表)。

你需要一个控制器。这就是代码如何将浏览器请求的URL转换为响应。

  

但这种方法对于不确定数量的图像来说是不切实际的。

然后写一个通用的。转换所有与其他控制器不匹配的网址,或以某个路径开头,或以$stmt = $this->conn->prepare("INSERT INTO `restaurants` (`unique_id`, `name`, `type`, `longitude`, `latitude`, `value_for_money`, `cleanliness`, `view`, `atmosphere`, `staff`, `created_at`) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW())"); 开头的网址,或基于网址的任何您喜欢的逻辑路径。

读取文件的内容并输出合适的HTTP标头(包括正确的内容类型),然后输出数据。