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

Question

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

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

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

Answer 1

听起来像是将模板存储在<div>s(或类似的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元素,也不会尝试解析该src属性.