javascript - Handlebars 模板和动态图像

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 type :

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

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