车把模板和动态图像答案

【问题标题】：Handlebars templating and dynamic images车把模板和动态图像
【发布时间】：2012-09-21 13:40:53
【问题描述】：

在我的模板中，我正在做类似的事情

<img class="someClass" src="{{imgURL}}">

图像已正确加载，但我收到如下警告：

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)

有没有办法解决这个问题？

【问题讨论】：

模板是否在被模板引擎解析之前附加到页面？如果是这样，我看不到任何解决方法。
我不这么认为。我正在做一个 ajax 调用来获取我的外部车把模板。我缓存了这些模板，稍后我有一个函数，它获取 json 数据并找到合适的模板用作源，然后我编译源并将 json 数据传递给那个编译的模板。这种方法是否会导致这些警告？
那很奇怪。好吧，当您使用源创建图像元素时，浏览器将发出请求以尝试缓存它。如果模板被解析为字符串，则被解析为不应该发生的 DOM 元素。但是无论如何，您可以忽略这种警告，它只是通知您未找到请求的文件（就在您交换源并再次加载之前），普通最终用户在浏览时没有打开他们的控制台您的网站。 =]

标签： javascript templates handlebars.js

【解决方案1】：

你有两个问题：

<img> 中缺少结束语，但这没什么大不了的。
您的模板存储在隐藏的 <div> 或包含 HTML 的类似元素中。

如果你这样说：

<div id="t" style="display: none">
    <img class="someClass" src="{{imgURL}}">
</div>

浏览器会将<img> 解释为真实图像并尝试加载src 属性中指定的资源，这就是您的404：

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)

来自。模板很少是有效且格式正确的 HTML，因此您需要阻止浏览器尝试将模板解释为 HTML。通常的做法是将模板存储在<script> 中，并带有非HTML type：

<script id="t" type="text/x-handlebars-template">
    <img class="someClass" src="{{imgURL}}">
</script>

然后你可以说Handlebars.compile($('#t').html()) 来获取你编译的模板，浏览器不会尝试将#t 内容解释为HTML。

【讨论】：

感谢这修正了我的警告。

【解决方案2】：

没有一个答案对我有用。我通过将图像转换为 base64 并将其作为车把模板中的 img src 发送来让它工作

模板.hbs

{{#if img_src}}
    <img src="{{{img_src}}}" alt=""/>
{{/if}}

source.js

data = {
         img_src: base64img.base64Sync('./assets/img/test.png');
       }

【讨论】：

【解决方案3】：

我知道现在已经很晚了，但这里是你想做的事情：

var view = Ember.View.create({templateName: 'myTemplate', myPicture: 'http://url_of_my_picture.png'});

view.appendTo('#myDiv');

<script type="text/x-handlebars" data-template-name="myTemplate">
    <img {{bindAttr src="myPicture"}}>
</script>

【讨论】：

【解决方案4】：

我发现使用三重括号可以正常工作。

<img src="{{{your source}}}" alt={{{your alt}}} />

【讨论】：

这个问题是在 5 年前的 2012 年提出的。您确定这个新答案适用于 2012 版的 handebars.js 吗？