防止使用模板語法加載圖像的mustache.js模板

Question

簡單的問題：我在代碼的前端有一些鬍鬚模板，其中許多圖像標籤的源設置爲鬍鬚js設置的變量。即..

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

這使服務器與根/ {{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，這樣瀏覽器就不會看到<script>爲HTML img元素中的<img>，它不會嘗試解決src屬性。