在 .handlebars/html 中显示图像

Question

我正在尝试将 link 图像添加到我的视图目录中的 .handlebars/html 文件中。我已经创建了一个 public 文件夹，因为我发现这是必要的，但是当我打开我的网页时仍然无法显示 linked 图像。

这是我的 node.js 代码...

var express = require('express');
var session = require('express-session');
var request = require('request');

var app = express();
var handlebars = require('express-handlebars').create({defaultLayout: 'main'});
var bodyParser = require('body-parser');

app.use(session({secret:'secretSauce'}));
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.set('port', 3021);

app.get('/', function (req, res, next) {
res.render('index');
});

app.get('/setup', function (req, res, next) {
    res.render('setup')
});

app.use(function(req,res){
  res.status(404);
  res.render('404');
});

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.type('plain/text');
  res.status(500);
  res.render('500');
});

app.listen(app.get('port'), function(){
  console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.');
});

这是我尝试加载图像的页面：

<h1>
Getting a Mailjet Account, an API, and Misc. Set Up
</h1><br>
<p>
This first part is going to their website and signing up to get an account. The sign up page looks like this. You can click on the image to take you there.
</p>
<a href="https://app.mailjet.com/signup"><img src="/public/images/mailjet signup.jpg" alt="sign up page"></a>
<br>
<p>
Once you take care of business there, you can head to your account page and click on the link circled in the image below. That link will take you to where your private and public API keys are stored.
</p>
<img src="/public/images/mailjet APIKey.jpg" alt="account page">
<br>
<p>
Awesome, so the last major thing to think about is if you want to add a domain name to your account. Typically your emails that you use at sign up will be autamically set up as a sender, and it will make it look like emails are coming from that account. However, you may have multiple senders on a company domain. In that case you'll want to head over to the accuont settings and add that domain. This way in the future if employees send something it will automatically allow senders from the domain. This is really more of a logistical matter than     anything, and it doesn't directly affect using this How to Guide.
</p>
<ul>
  <li><a href="/">Prev</a> </li>
  <li><a href="">Next</a></li>
</ul>

Answer 1

要在车把页面或 HTML 上获取图像，我们需要在 index.js 文件或 app.js 文件上设置路径，这取决于您的起始页面是什么.

Index.js

app.use(express.static('views/images'));

promotionapplication\views\images - 这是我的文件夹结构，我的 index.js 文件在 promotionapplication 中，我的照片保存在图像文件夹中。您可以保留文件夹的任何结构，但您应该在 app.use 中相应地提及它。

所以现在我可以使用文件夹中的任何图片，方法是在 handlebars 页面中使用以下代码-

first.handlebars

 <img src="bckground.jpg" alt="piooop" />

记得在进行更改后重新加载页面。

它工作得很好。有什么问题欢迎评论，我会尽力解答

Answer 2

在 nodemailer 选项中使用附件。 LInk 将 .hbs 文件中的图像 src 转换为附件描述中的唯一 cid，如下所示：

src="cid:unique@unique" 

 const mailOptions = {
from: 'xxxxx',
to: x,
subject: `xxxx`,
template : 'xxx',
attachments: [
  {
    filename: 'xx.png',
    path: __dirname +'/images/xx.png',
    cid: 'unique@unique'
  },]

在 .handlebars/html 中显示图像

displaying images in a .handlebars/html

html

express

handlebars.js