Question

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

的事情

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

图像正确加载但我收到警告：

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

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

Answer 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>的{{1}}中：

type

然后，您可以说<script id="t" type="text/x-handlebars-template"> <img class="someClass" src="{{imgURL}}"> </script>来获取已编译的模板，并且浏览器不会尝试将Handlebars.compile($('#t').html())内容解释为HTML。

Answer 2

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

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 3

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

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

Answer 4

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

template.hbs

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

source.js

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

把手模板和动态图像

4 个答案: