Question

我尝试将图片链接到我的views目录中的.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'
  },]

以.handlebars / html显示图像

2 个答案: