Handlebars.js中img标签内{{url}}无法解析的技术问询

这个问题我之前也碰到过！核心原因是Handlebars对HTML属性内的表达式处理逻辑和普通文本节点不一样，下面给你两种靠谱的解决办法：

方法1：使用Handlebars属性绑定语法（推荐） #

直接把属性名和表达式用等号组合，放在花括号里，这是Handlebars官方推荐的属性绑定方式，还会自动处理转义，更安全：

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    {{#each this}}
      <h1>{{title.rendered}}</h1>
      <div>{{content.rendered}}</div>
      <!-- 改用属性绑定语法 -->
      <img {{src=url}} alt=""/>
    {{/each}}
  </div>
</script>

方法2：使用无转义表达式（仅可信URL场景） #

如果你的URL是完全可信的（不会包含特殊字符或恶意代码），可以用三重花括号关闭自动转义，强制解析属性内的表达式：

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    {{#each this}}
      <h1>{{title.rendered}}</h1>
      <div>{{content.rendered}}</div>
      <!-- 三重花括号强制解析 -->
      <img src="{{{url}}}" alt=""/>
    {{/each}}
  </div>
</script>

额外检查点 #

虽然你说其他部分正常，但还是可以快速确认下：

• 数据数组里的每个对象确实存在url字段，并且值是有效的URL
• 你的Handlebars版本不是特别老旧的版本（比如v1.x之前的版本对属性表达式支持有限）

内容的提问来源于stack exchange，提问作者pvN74