Simple question: I have a few mustache templates in the front end of the code, many with image tags with a source set to a variable set by mustache js. that is..

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

This is causing the server to load images with a url of root/{{img_src}}, which is unideal. How can I prevent them from being preloaded?

Simple question: I have a few mustache templates in the front end of the code, many with image tags with a source set to a variable set by mustache js. that is..

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

This is causing the server to load images with a url of root/{{img_src}}, which is unideal. How can I prevent them from being preloaded?

• javascript
• ruby-on-rails
• mustache

• This sounds like an XY problem. I think the better question here is: why is the browser receiving (and interpreting as HTML) raw templates? – Matt Ball Commented Dec 17, 2013 at 4:42

1 Answer 1

Sounds like you're storing your templates in <div>s (or similar HTML wrappers) like this:

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

If you do things like that, you're telling the browser that your template is HTML when it isn't; if you tell the browser to interpret something as HTML you should expect it to do so. The solution is to use a <script> container:

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

<script>s contain non-replaceable character data rather than HTML so the browser won't see the <img> inside the <script> as an HTML img element and it won't try to resolve the src attribute.