javascript - Prevent mustache.js templates from loading images using template syntax - Stack Overflow

admin管理员组

文章数量:1429858

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

Share Improve this question Follow asked Dec 17, 2013 at 4:39 Tim HuiTim Hui 12511 silver badge1010 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： javascriptPrevent mustachejs templates from loading images using template syntaxStack Overflow