在 Node.js 中按相对路径显示图像

Posted 2023-03-06

【中文标题】在 Node.js 中按相对路径显示图像

【英文标题】：Displaying images by relative path in Node.js

【发布时间】：2016-11-16 23:17:02

【问题描述】：

我正在构建我的第一个 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 访问该控制器来访问文件系统中的其他文件（如样式表）。但是这种方法对于不确定数量的图像是不切实际的。

如何使用 Node.js 在文件系统中访问和显示我的图像？

【问题讨论】：

你了解 node.js 默认不提供任何文件，文件系统不提供任何文件。因此，对于您希望从文件系统提供的每个图像，您需要确保它被您的 http 服务器的路由处理程序覆盖。对于静态文件并使用 Express 之类的框架，您通常会使用 express.static() 告诉 express 在硬盘上的特定子目录层次结构中查找具有特定路径前缀的任何文件。

而且，您通常不希望使用相对路径，因为这些路径与您所在页面的 URL 相关，这通常会使事情变得复杂而不是简化事情。更典型的是，您会使用类似/public/img/test.jpg 的东西，并且您使用的路由处理程序会看到/public 的任何前缀，然后在特定的子目录层次结构中查找路径的其余部分。

而且，如果您使用 express 和车把的内置支持，您在问题中显示的许多代码都可以消失。

感谢您的详尽回复。是的..必须路由一切。我有点难以将我的大脑包裹在文件系统提供的任何内容上。我有点希望 html 标记能够正常工作，但我想在 LAMP 中工作时这些都是理所当然的。然后我会为图像组装一个路由器。至于 Express，我可能很快就会搬过来，但在我享受框架的好处之前，出于学习的原因，我更愿意自己做这件事。快速提问.. 是否有人原生使用节点，还是都使用 Express 或其他流行框架？

我从来没有发现 Express 会妨碍我。您拥有所有源代码，因此您始终可以准确了解它在做什么让我的工作效率大大提高。此外，还有一组丰富的 NPM 模块可以与它一起解决各种常见问题，从用户身份验证到 cookie 解析。真的没有理由自己写所有这些东西。如果您想知道它是如何工作的，只需研究它的来源即可。

【参考方案1】：

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

您需要有一个控制器。这就是代码将浏览器请求的 URL 转换为响应的方式。

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

然后写一个通用的。将所有与另一个控制器不匹配的 URL，或以特定路径开头，或以 .jpg 结尾，或任何您喜欢的逻辑的 URL 转换为基于 URL 的文件路径。

读取文件的内容并输出一个合适的HTTP头（包括正确的内容类型），然后是数据。