使用模板语法阻止mustache.js模板加载图像

Question

简单的问题：我在代码的前端有一些小胡子模板，很多都带有图像标签，其源设置为由胡子js设置的变量。那是..

<img src="{{img_src}}" />

这导致服务器使用root / {{img_src}}的URL加载图像，这是不理想的。如何防止它们被预加载？

Answer 1

听起来像是将模板存储在<div>（或类似的HTML包装器）中，如下所示：

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

如果您这样做，那么您告诉浏览器您的模板不是HTML;如果你告诉浏览器将某些东西解释为HTML，你应该期望它这样做。解决方案是使用<script>容器：

<script id="t" type="text/x-mustache">
    <img src="{{img_src}}" />
</script>

<script>s包含不可替换的字符数据而不是HTML，因此浏览器不会将<img>内的<script>视为HTML img元素，而是赢了t尝试解析src属性。