车把不会呈现 HTML 图像标签？（使用 NodeJS）答案

【问题标题】：handlebars won't render HTML image tag? (using NodeJS)车把不会呈现 HTML 图像标签？（使用 NodeJS）
【发布时间】：2019-05-17 10:14:09
【问题描述】：

我正在尝试使用把手呈现 HTML 图像标签。 HTML 确实正确地传递给了车把。（所以确实传递到网页，但图像没有呈现。）我该如何解决这个问题？

在我的 .HBS 文件中，我有：

{{HTMLforImage}} {{image}} {{alt}}

在我的 .js 文件中，我有：

  res.render('imageHub', {
  HTMLforImage: "<img src = ",
  image: "\"" + req.body.imageLink + "\"",
  alt: " alt = \"raccoon\">"
});

其中 imageHub 是页面把手应该呈现 HTML，但不是发布图片，我只是将 HTML 传递到网页上。任何有关如何解决此问题的想法将不胜感激。

【问题讨论】：

您是否尝试过删除此处之间的空格 - {{HTMLforImage}} {{image}} {{alt}}
我删除了空格，但仍然无法正常工作。
从 js 文件发送 imageURL 并像这样在把手中使用它 -
为什么不直接发送req.body.imageLink。图片标签和类不是动态内容
要在 Handlebars 中使用 HTML，您需要用 {{{}}} 将其括起来（参考：handlebarsjs.com，在 HTML 转义下）。因此，我必须将 HTML 部分包装在三个花括号中，然后将 imgURL 部分放在常规双括号中，为了保持一致性，最好只使用 Handlebars 来呈现它，而不是混合 HTML 和 Handlebars跨度>

【解决方案1】：

{{HTMLforImage}} 将转义标记。试试三方括号：{{{HTMLforImage}}}

【讨论】：

【解决方案2】：

使用三重大括号转义 HTML 特殊字符，例如 < 和 > 字符：

{{HTMLforImage}} {{image}} {{alt}}

你也有<image ...，但它应该是<img ...

最佳做法是将您的车把内容更改为：

<img src="{{imageLink}}" alt="{{alt}}" />

并只传递所需的数据，如下所示：

res.render('imageHub', {
  imageLink: req.body.imageLink,
  alt: 'raccoon'
})

【讨论】：