如何在 Heroku 上显示带有图像的静态 html 页面答案

【问题标题】：How to display static html page with image on Heroku如何在 Heroku 上显示带有图像的静态 html 页面
【发布时间】：2016-06-21 18:33:26
【问题描述】：

我正在尝试在 Heroku 上显示一个带有图像标签的 html 页面。该图像存在，但我无法弄清楚要使用什么路径才能找到它。我尝试的每个绝对路径都会出现 404 错误，并且我不能使用相对路径，因为它会将其附加到加载 html 页面的位置（恰好是 /api/errorcodes/x，其中 x 是用于查找原始 html 页面的编号）IE

app.get('/api/errorcode/:errorcode', function(request, response) {
   var errorcode = request.params.errorcode;
   var doc = 'Error' + errorcode + '.html';
   console.log('__dirname = ', __dirname);
   response.sendFile(__dirname + '/views/pages/' + doc);
});

所以目录结构如下：

views/pages/Error1.html
视图/页面/Error1.fld/img001.png

Error1.html 有 <img src="/views/pages/Error1.fld/img001.png"> 并返回 404（页面 Error1.html 加载，但图像在 heroku 日志中得到 404）。

我也尝试过“/app/views/pages/Error1.fld/img001.png”以及将图像移动到 /public 并从那里尝试相同的组合。我如何告诉 img 标签在哪里可以找到图像？！

【问题讨论】：

标签： html url heroku

【解决方案1】：

好吧，我终于想通了。万一其他人遇到这个问题，这里就是答案：

在声明任何路由之前，添加static 中间件：

app.use(express.static(__dirname + '/public'));

“static 中间件与为您要交付的每个静态文件创建路由的效果相同，该路由呈现文件并将其返回给客户端”——摘自 O'Reilly 的使用 Node & Express 进行 Web 开发一书。

如果您的图像文件位于public/img/logo.png，则可以在html文件中使用<img src="/img/logo.png">。

【讨论】：