把手模板和动态图像

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.通常的方法是将模板存储在<script>非HTML中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');
       }