javascript - 车把模板和动态图像

Question

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

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

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

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

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

Answer 1

你有两个问题：

1. 您缺少结束语，<img>但这没什么大不了的。
2. 您的模板存储在<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 的 a 中type：

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

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

Answer 2

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

模板.hbs

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

源码.js

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

Answer 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>

Answer 4

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

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