在.handlebar/html中显示图像

在.handlebar/html中显示图像,html,express,handlebars.js,Html,Express,Handlebars.js,我正在尝试将图像链接到我的视图目录中的.handlebar/html文件。我已经创建了一个公用文件夹,因为我发现这是必要的,但仍然无法在打开网页时显示链接的图像 这是我的node.js代码 var express = require('express'); var session = require('express-session'); var request = require('request'); var app = express(); var handlebars = requir

我正在尝试将图像链接到我的视图目录中的.handlebar/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>

获取Mailjet帐户、API和杂项。设置

这第一部分是去他们的网站和注册,以获得一个帐户。注册页面如下所示。你可以点击图片带你去那里。


一旦你处理好了那里的业务,你就可以进入你的账户页面,点击下图中圈出的链接。该链接将把您带到存储私有和公共API密钥的位置。


太棒了,所以最后要考虑的是你是否想在你的帐户中添加域名。通常,您在注册时使用的电子邮件会自动设置为发件人,这会使其看起来像是来自该帐户的电子邮件。但是,一个公司域上可能有多个发件人。在这种情况下,您需要转到Account设置并添加该域。这种方式在将来,如果员工发送内容,它将自动允许域中的发件人。这实际上更像是一个后勤问题,它不会直接影响到如何指导。


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

Index.js

promotionapplication\views\images
-这是我的文件夹结构,我的index.js文件位于
promotionapplication
中,我将我的图片保存在images文件夹中。你可以保留文件夹的任何结构,但你应该在
应用程序中相应地提及它。使用

因此,现在我可以使用文件夹中的任何图片,使用Handlebar页面中的以下代码-

第一。把手


记住在更改后重新加载页面


它工作得非常好。如果有任何问题,请发表评论,我将尝试给出答案。

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

您的img
src
中是否应该有空格?e、 g
,如果它位于
/public/images/mailjet/
文件夹中,它是否应该类似于
src=“/public/images/mailjet/signup.jpg”
?我认为您将图像的名称误认为是文件目录。图片标题为mailjet signup.jpg和mailjet APIKey.jpg。感谢您的尝试。您的Express代码看起来不错,请尝试从文件名中删除空格(通常在文件名中使用空格是不好的做法)。将其更改为
/images/mailjet signup.jpg
有效吗?我取出了空格并更改了目录路径,但无效。我班上还有人说他们只是把图片上传到谷歌并使用链接。因此,如果其他方法都失败了,我想我可以做到。回顾这一点,我现在看到了代码中的错误。我已经向express注册了公用文件夹以提供静态文件,但我仍然在图像路径的前面加上/public。因此,我在express.js使用的公共目录中寻找一个名为public的目录。你的回答在技术上是正确的。这和我原来的问题有什么关系?
 <img src="bckground.jpg" alt="piooop" /> 
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'
  },]