在 .handlebars/html 中显示图像

Question

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

这是我的 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，我将照片保存在 images 文件夹中。您可以保留文件夹的任何结构，但您应该在app.use 中相应地提及它。

所以现在我可以使用文件夹中的任何图片，通过在车把页面中使用以下代码 -

first.handlebars

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

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

它工作得很好。如果有任何问题请评论，我会尽力给出答案。

Answer 2

在 nodemailer 选项中使用附件。将 .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'
  },]